Forum Moderators: open
I need a script that has like links:
Link1, Link2, Link3
With layers:
Layer1, Layer2, Layer3
The script I couldn't find on google is something like the ordinary show/hide layers scripts. Idea would be that there is few sections (div layers) in the so called "control panel". I need a script that would show the layer, but hide others.
Like when link1 is clicked, it would hide all and then show layer1...
Many of the scripts I found on google have one link for show and another for hide.
Thanks
If you want more than one set on a page, we need to amend it (but only slightly).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>TEST</title>
<style type="text/css">
.text{display: none;width:300px;border: solid 1px lightblue;}
#text0{display: block;}
</style>
<script type="text/javascript">
[color=darkgreen]/*
Global "swap" holder
Use value, null, if no layer initially visible
*/[/color]
var currLayerId = "text0";function togLayer(id)
{
if(currLayerId) setDisplay(currLayerId, "none");
if(id)setDisplay(id, "block");
currLayerId = id;
}
function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
</head>
<body>
<!--buttons-->
<a href="#" onclick="togLayer('text0');return false;">text0</a>
<a href="#" onclick="togLayer('text1');return false;">text1</a>
<a href="#" onclick="togLayer('text2');return false;">text2</a>
<a href="#" onclick="togLayer(null)">Show none</a>
<!--layers-->
<div id="text0" class="text">Content of text0</div>
<div id="text1" class="text">Content of text1</div>
<div id="text2" class="text">Content of text2</div>
</body>
</html>
Really great code!
I'm having one problem tho... I can't get the layers invisible at the beginning. There is allways one visible or then it doesn't work.
Refer to big pink comment :)
