Hide Show table with div

Question

4.00/5 (1 vote)

See more:

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">
                    <br />
                    <br />
                    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">
                    <br />
                    <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        							
</div>

Posted 28-Apr-11 10:09am

Dentj

Add a Solution

Comments

Ali Al Omairi(Abu AlHassan) 28-Apr-11 18:17pm

why dont you toggle display 'block' and 'none' ;

6 solutions

Solution 2

The last example will work.

Here is a new demo in response to a request where only one div is displayed at any one time.

Posted 28-Apr-11 12:13pm

Monjurul Habib

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.

Posted 28-Apr-11 10:16am

prot0col

Updated 28-Apr-11 10:17am

v2

Solution 3

put the tables inside div tags like

XML

<div id="main">
  <div id="div_tab1">
    <table/>
  </div>
  <div id="div_tab2">
    <table/>
  </div>
</div>

JavaScript

//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

Posted 28-Apr-11 13:21pm

saxenaabhi6

Updated 28-Apr-11 18:19pm

v2

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

Posted 28-Apr-11 18:42pm

koolprasad2003

Solution 5

Hello the Script will be as follows

Posted 28-Apr-11 20:20pm

RTG More

Add a Solution

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

Akpd · Accepted Answer · 2011-04-28T23:51:00

XML

<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>

Hide Show table with div

6 solutions

Solution 2

Solution 6

Solution 1

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0

Hide Show table with div

6 solutions

Solution 2

Solution 6

Solution 1

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0

Existing Members

...or Join us