Javascript Show/Hide Tables

[djsting]

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:

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

<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

[wbport]

This might give you some ideas about selectively hiding parts of a web page:

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.

[djsting]

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?