Show/Hide JS

pa007 · April 6th, 2007, 04:18 PM

Ok, so I've got a piece of javascript that changes the display state of a set of divs from none to block or vice versa. My problem is that if you have one div display: block; and you click on another link the next div just displays below the first one rather than replacing it.

Here's my code:

Code:

var state = 'hidden';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.display = state;
}
}

So is there any way for the divs to swap on click rather than just to display one under the other? Or when another link is clicked for all of the other divs (not all of the divs on the page though) to revert to display:none; except the one which is being activated?

Thanks,

Pete.