Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C#ASP.NETCSS
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) 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 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 2

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

Solution 5

Hello the Script will be as follows
<table width="600" height="400" cellpadding="0" cellspacing="0" önclick="toggle(this); return false;" runat="server" id="XP">
<table width="600" height="400" cellpadding="0" cellspacing="0" önclick="toggle(this);return false;" runat="server" id="win7">
 
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
Your Filters
Interested
Ignored
     
0 Shai Vashdi 963
1 Tadit Dash 270
2 Sergey Alexandrovich Kryukov 250
3 OriginalGriff 233
4 Peter Leow 180
0 Sergey Alexandrovich Kryukov 9,435
1 OriginalGriff 5,498
2 Peter Leow 4,230
3 Maciej Los 3,540
4 Abhinav S 3,353


Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 29 Apr 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid