SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show table then if link is clicked hide it and show another

    I've searched all over and cannot find a script that will do this. I would like to have 3 links above a table. By default the 1st table will be shown and if the 2nd link is clicked the 1st table will be hidden and the 2nd will be shown instead.

    Can someone tell me how to do this? I suck at Javascript.
    John Saunders

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <script type="text/javascript">
    	function show_table(id){
    	  document.getElementById('table1').style.display='none';
    	  document.getElementById('table2').style.display='none';
    	  document.getElementById('table3').style.display='none';
    	  document.getElementById('table'+id).style.display='block';
    	}
    </script>
    <a href="#" onclick="show_table(1)">table1</a>
    <a href="#" onclick="show_table(2)">table2</a>
    <a href="#" onclick="show_table(3)">table3</a>
    <table id="table1">
    <tr>
             <td>a</td>
             <td>a</td>
    </tr>
    <tr>
             <td>a</td>
             <td>a</td>
    </tr>
    </table>
    <table id="table2" style="display:none">
    <tr>
             <td>b</td>
             <td>b</td>
    </tr>
    <tr>
             <td>b</td>
             <td>b</td>
    </tr>
    </table>
    <table id="table3" style="display:none">
    <tr>
             <td>c</td>
             <td>c</td>
    </tr>
    <tr>
             <td>c</td>
             <td>c</td>
    </tr>
    </table>
    Saul

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, got it working. Thanks!
    John Saunders


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •