Click here to Skip to main content
12,394,719 members (69,490 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: C# ASP.NET CSS
I am trying to show and hide the tables based on when a user clicks tab 1 or tab 2. I am stuck at the moment and could use some help.I have tried jquery and the ajax control toolkit neither of which work for the master page of my company.

<div class="divAreaTabs"  runat="server" id="tabs">
<ul>
	<li id="tab1" class="activeTab"><a href="#">Tab 1</a></li>
	<li id="tab2"><a href="#">Tab 2</a></li>
	<div style="clear: both;"></div>
</ul>
 
<div class="divAreaTabsContent">		
        <table width="600" height="400" cellpadding=0 cellspacing=0  runat="server" id="XP">
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    
 
                    
 
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        
        <table width="600" height="400" cellpadding=0 cellspacing=0  runat="server" id="win7">
                 <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    
 
                    
 
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        							
</div>
Posted 28-Apr-11 10:09am
Dentj157
Comments
Ali Al Omairi(Abu AlHassan) 28-Apr-11 18:17pm
   
why dont you toggle display 'block' and 'none' ;
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 6

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script language="javascript" type="text/javascript">
    function ShowHide(i) {
 
        document.getElementById('divtab2').style.visibility = 'hidden';
 
        if (i==1)
            {
 
                document.getElementById('divtab2').style.visibility = 'hidden';
                document.getElementById('divtab1').style.visibility = 'visible';
           }
 
            if (i==2){
 
               document.getElementById('divtab1').style.visibility = 'hidden';
               document.getElementById('divtab2').style.visibility = 'visible';
           }
    }
</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="divAreaTabs"  runat="server" id="tabs">
<ul>
 
    <li id="tab1" class="activeTab" onclick="ShowHide('1');"><a href="#">Tab 1</a></li>
    <li id="tab2" onclick="ShowHide('2');"><a href="#">Tab 2</a></li>
    <div style="clear: both;"></div>
</ul>
 
<div class="divAreaTabsContent">
<div id="divtab1" onclick="ShowHide('1');">
        <table width="600" height="400" cellpadding=0 cellspacing=0  runat="server" id="XP">
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
          </table>
          </div>
          <div id="divtab2">
        <table width="600" height="400" cellpadding=0 cellspacing=0  runat="server" id="win7">
                 <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
        </div>
</div>
<script language="javascript" type="text/javascript">
    ShowHide();
</script>
</div>
    </form>
</body>
</html>
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 5

Hello the Script will be as follows



function toggle(tabId) {
var tab= document.getElementById(tabId);
if (tab) {
switch (div.style.display) {
case '':
div.style.display = 'none'
break;
case 'none':
div.style.display = '';
break;
}
}
}

will need a bit of tweak in this ..

hope this helps
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Put them is seperate panels, then set there ID's and then use them to set visible = false; and visible = true as required.
  Permalink  
v2
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

put the tables inside div tags like

<div id="main">
  <div id="div_tab1">
    <table/>
  </div>
  <div id="div_tab2">
    <table/>
  </div>
</div>
//on the 'onclick' event of hyperlinks tab1 and tab2 in your unordered list items do the jquery
$("#div_tab1").show("slow"); $("#div_tab2").hide("slow");
//and
$("#div_tab2").show("slow"); $("#div_tab1").hide("slow");
//respectively.  
hope this helps..

thanks
  Permalink  
v2
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 4

Set visible "FALSE" will create a empty space on page.
use "Style.Display:'none'" it will totally remove the DIV and use "Style.Display:''" for make it visible
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160721.1 | Last Updated 29 Apr 2011
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100