Auto expanding divs inside tab conatiner

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dmj07
    New Member
    • Aug 2008
    • 55
    #1

    Auto expanding divs inside tab conatiner

    What I would like to achieve is to have two divs on either side of my tab container, one on the left and one on the right both touching the far sides. Then information will need to go inbetween the two divs in the middle.

    They also need to automatically expand in height when the tab container expands. Here is my code up to now:


    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function ShowDiv(divid)
{
    if(document.getElementById(divid).style.display == 'none')
    {
        document.getElementById(divid).style.display = 'block';
    }
    else
    {
        document.getElementById(divid).style.display = 'none';
    }
}

</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    <cc1:TabContainer ID="TabContainer1" runat="server" CssClass="blue" ActiveTabIndex="0">
        <cc1:TabPanel runat="server" HeaderText="Test" ID="TabPanel1">
        <ContentTemplate>
        
        <div id="LeftDiv" style="background:red; float:left; width:25px; margin:-8px; height:auto;"></div>
        
        <div id="RightDiv" style="background:red; float:right; width:25px; margin:-8px; height:auto;"></div>
        
        <div style="margin: 25px;">
        Test <br />
        Test <br />
        Test <br />
        <a href="javascript:;" onclick="ShowDiv('Test');">Test</a>
        <div id="Test" style="display:none;">
        
        Hellllloo!!!!<br /><br /><br />
        
        </div>
        </div>
        </ContentTemplate>
        </cc1:TabPanel>
        
        <cc1:TabPanel runat="server" HeaderText="Test" ID="TB2">
        <ContentTemplate>
        
        
        </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel runat="server" HeaderText="Test" ID="TabPanel2">
        <ContentTemplate>
            Hello!!!
        </ContentTemplate>
        </cc1:TabPanel>
        </cc1:TabContainer>
    </form>
</body>
</html>
    Many thanks in advance
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Since most people don't use ASP, you need to provide the generated markup and the stylesheet for us to help you.

        Comment

        • dmj07
          New Member
          • Aug 2008
          • 55
          #3
          Well here is the HTML markup with a few changes from me trying things:


          Code:
          <div id="TabContainer1" class="blue" style="width:200px;visibility:hidden;">
<div id="TabContainer1_header">
<span id="__tab_TabContainer1_TabPanel1">Test</span><span id="__tab_TabContainer1_TB2">Test</span><span id="__tab_TabContainer1_TabPanel2">Test</span>
	</div><div id="TabContainer1_body">
		<div id="TabContainer1_TabPanel1" style="display:none;visibility:hidden;">
			
        <table style="margin: -8px;" width="200px">
        <tr>
        
        <td style="width:20px;"><div style="background:red; float:left; width:25px; height:auto; position:relative;"></div></td>
        
        
        <td style="width:150px;">
        <div style="margin: 25px;">
        Test <br />
        Test <br />
        Test <br />
        <a href="javascript:;" onclick="ShowDiv('Test');">Test</a>
        <div id="Test" style="display:none;">
        
        Hellllloo!!!!<br /><br /><br />
        
        </div>
        </div>
        </td>
           
        <td style="width:25px;"><div style="background:red; float:right; width:27px; height:auto; position:relative;"></div></td>
       
        </tr>
        </table>
       
        
		</div><div id="TabContainer1_TB2" style="display:none;visibility:hidden;">
			
        
        
        
		</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
			
            Hello!!!
        
		</div>
	</div>
</div>
          I don't have any CSS on it at the moment because I am just trying to get it working before populating the whole page.

          Many thanks in advance.

            Comment

            Previous template Next
            Working...