Welcome to the MacNN Forums.

Apfhex · Oct 8, 2003, 05:36 AM

I'm looking for a way (javascript or other) to show and hide tables on a page with the click of some text, like this:

Click Me 1 (clicked)
Here's a table with some images #1.
Click Me 2
Click Me 3
---
Click Me 1
Click Me 2 (clicked)
Here's a table with some images #2.
Click Me 3
---
Click Me 1
Click Me 2
Click Me 3 (clicked)
Here's a table with some images #3.

...and so on. All of this would be centered inside a large table on the page. I know very little about javascript, so I really don't know how to go about this (I've searched for examples, but none of them do quite the thing I want).

Arkham_c · Oct 8, 2003, 06:09 PM

I think what you want to do is put the tables in a layer/div and show/hide that.

mzllr · Oct 8, 2003, 11:54 PM

here ya go.... just adjust the heights of the layers for what you need.
[php]
<html>

<head>

<script language="JavaScript" type="text/javascript">
function hide(i, n, h)
{
var layer = document.getElementById(i);
var nav = document.getElementById(n);

layer.style.visibility = "hidden";
nav.style.height = h;
}

function show(i, n, h)
{
var layer = document.getElementById(i);
var nav = document.getElementById(n);

layer.style.visibility = "visible";
nav.style.height = h;

}
</script>

<style type="text/css">
#nav1 { height: 15px; top: 5px; z-index: 1 }

#nav2 { height: 15px; top: 20px; z-index: 1 }

#nav3 { height: 15px; top: 35px; z-index: 1 }

#one { visibility: hidden; }

#two { visibility: hidden; }

#three { visibility: hidden; }
</style>

</head>

<body>

<div id="nav1">
<a href="javascript:show('one', 'nav1', 30); javascript:hide('two', 'nav2', 15); javascript:hide('three', 'nav3', 15)">Link 1</a>
<div id="one">Now you see me</div>
</div>

<div id="nav2">
<a href="javascript:hide('one', 'nav1', 15); javascript:show('two', 'nav2', 30); javascript:hide('three', 'nav3', 15)">Link 2</a>
<div id="two">Now you see me</div>
</div>

<div id="nav3">
<a href="javascript:hide('one', 'nav1', 15); javascript:hide('two', 'nav2', 15); javascript:show('three', 'nav3', 30)">Link 3</a>
<div id="three">Now you see me</div>
</div>

</body>

</html>
[/php]

see it here

Apfhex · Oct 8, 2003, 11:57 PM

Thanks! That looks like it should work good... I'll go try it.

mzllr · Oct 9, 2003, 12:10 AM

whoops, just tried it in mac ie and it doesn't work exactly right... you need to hide the overflow...

[php]
#nav1 { height: 15px; top: 5px; overflow: hidden; z-index: 1 }

#nav2 { height: 15px; top: 20px; overflow: hidden; z-index: 1 }

#nav3 { height: 15px; top: 35px; overflow: hidden; z-index: 1 }
[/php]