Click here to Skip to main content
Rate this: bad
good
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 11:09am
Dentj157
Comments
Ali Al Omairi(Abu AlHassan) at 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)



Advertise | Privacy | Mobile
Web02 | 2.8.150327.1 | Last Updated 29 Apr 2011
Copyright © CodeProject, 1999-2015
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