show/hide javascript woes...

jamm

I'm trying to show/hide contents of a hidden div so that when a menu/option is clicked, it displays...but then when another is clicked in the same group, it removes the current one and displays the new... Is this even possible? It's giving me a headache trying to work out the sequence of commands. mouse up down over out in out shake it all about...

Any help would be greatly appreciated !

Thanks.

chris

i did a little thing with menu items a long while back and have some remnants of the project online. might be of help?

[hide]http://fazyluckers.com/chris/gnet_template/[/hide]

jamm

Just searched again using different words/phrases and came across this : http://papermashup.com/jquery-show-hide-plugin/

Not tested it yet, but looks as though it will do the job nicely...

CPU

JS in the head section:

function showLayer(whichLayer) { if (document.getElementById) { // this is the way the standards work document.getElementById(whichLayer).style.visibility = "visible"; document.getElementById(whichLayer).style.opacity = 100; document.getElementById(whichLayer).style.filter = "alpha(opacity=100)"; } else if (document.all) { // this is the way old msie versions work document.all[whichlayer].style.visibility = "visible"; document.am.style.filter = "alpha(opacity=100)"; } else if (document.layers) { // this is the way nn4 works document.layers[whichLayer].visibility = "visible"; document.layers[whichLayer].style.opacity = "100"; } } function handleClick(whichClick) { if (whichClick == "show_layer1") { showLayer("layer1") hideLayer("layer2"); } else if (whichClick == "show_layer2") { hideLayer("layer1"); showLayer("layer2"); } }

The menue/option links:

<a onclick="handleClick('show_layer1');return true" href="#">Show Layer 1</a> <a onclick="handleClick('show_layer2');return true" href="#">Show Layer 2</a>

The divs that you want to "switch" on/off:

<div id="layer1">Content of layer 1</div> <div id="layer2">Content of layer 2</div>

Of course those two divs have to be set to hidden in your css at the beginning.

Hope this helps you!


Edit: and of course the code got fucked up by smilies
the ones should get replaced by ; and )

jamm

Cheers CPU. For the handleClick function, would you just add more if / else if arguments to the script to deal with more than 2 items?

so it'd become something like this :

function handleClick(whichClick) {
if (whichClick == "show_layer1" {
showLayer("layer1"
hideLayer("layer2" , "layer3";
}
else if (whichClick == "show_layer2" {
hideLayer("layer1" , "layer3";
showLayer("layer2";
}
else if (whichClick == "show_layer3" {
hideLayer("layer1" , "layer2";
showLayer("layer3";
}
}

And so on for more layers...?

CPU

yes, exactly. but put only one layer-id into a single command, the showLayer/hideLayer function
only accepts one argument:

showLayer("layerX");

or

hideLayer("layerX");