www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript Show/Hide Tables

  1. #1
    Join Date
    May 2009
    Posts
    4

    Javascript Show/Hide Tables

    Hi

    I'm creating a webpage that is going to utilize several tables that are hidden by default, and by clicking on a title, will load that table, and remove the current one (or hide it).

    The page can be found here:
    http://www.djsting.com/sstest

    The code works to a certain extent... clicking the link will show/hide the table but it appears below the rest of them, so both are visible. I only want one visible at any given time, and clicking a link will display that table while hiding the others. I hope that is clear enough

    Here is my current code:
    Code:
    <script>
    	function toggle_it(id){ 
    		if (document.getElementById){ 
    			obj = document.getElementById(id); 
    			if (obj.style.display == "none"){ 
    				obj.style.display = ""; 
    			} else { 
    				obj.style.display = "none"; 
    			} 
    		} 
    	} 
    </script>
    And my links have this code:
    Code:
    <a href="#" class="style11" onClick="toggle_it('ss14')">Sting Selections Vol. 14</a>
    What do I have to insert into the code to have it hide the current table, then display the new one? Please and thanks!

    -Sting

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    This might give you some ideas about selectively hiding parts of a web page:
    Code:
    function showPage(sPage, bShow)
    {
    	var div = document.getElementById(sPage);
    	div.style.visibility = bShow ? 'visible' : 'hidden';
    	div.style.position = bShow ? 'static' : 'absolute';
    }
    function setPage(sPage)
    {
    	showPage('start', sPage == 'start');
    	showPage('details', sPage == 'details');
    	showPage('solver', sPage == 'solver');
    	showPage('about', sPage == 'about');
    }
    It is is from a Sudoku solver.

  3. #3
    Join Date
    May 2009
    Posts
    4
    Thanks!

    I'm really new to JS tho, so figuring out how to tweak this to work for me is abit challenging. I'll give it a shot tho

    Any other suggestions?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles