Forum Moderators: open
Need some qualified help with this togglescript... :)
What I want is to toggle layers on the same spot with textlinks on my menu. The source I've pasted below does that unfortunately is doesn't hide the previous layer when a new link is clicked. Therefore the different layers just stack on top of eachother insted of toggle...
I don't know if I can use z-index but what I want is for the layer corresponding to the last link clicked to be on top at any time and use it like a menu with iframes..
If my explaining doesn't make any sense please tell and I'll give it a new shot..
Thx in advance - tfddk
--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" language="JavaScript"><!--
function toggle(object) {
if (document.getElementById) {
if (document.getElementById(object).style.visibility == 'visible')
document.getElementById(object).style.visibility = 'hidden';
else
document.getElementById(object).style.visibility = 'visible';
}
else if (document.layers && document.layers[object]!= null) {
if (document.layers[object].visibility == 'visible' ¦¦
document.layers[object].visibility == 'show' )
document.layers[object].visibility = 'hidden';
else
document.layers[object].visibility = 'visible';
}
else if (document.all) {
if (document.all[object].style.visibility == 'visible')
document.all[object].style.visibility = 'hidden';
else
document.all[object].style.visibility = 'visible';
}
return false;
}
//--></script>
<style type="text/css"><!--
.myStyle { position: absolute; left:100px; top:20px; visibility: hidden; }
.myStyle2 { position: absolute; left:100px; top:20px; visibility: hidden; }
//--></style>
</head>
<body>
<a href="#" onClick="toggle('myLayer1'); untoggle('all')">click me1</a>
<div id="myLayer1" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
This text shoul replace the<br>text in mylayer2 when "click me1"<br>is clicked
</td></tr></table></div><br>
<a href="#" onClick="toggle('myLayer2')">click me2</a>
<div id="myLayer2" class="myStyle2">
<table bgcolor="#ffffcc"><tr><td>
This text shoul replace the<br>text in mylayer1 when "click me2"<br>is clicked
</td></tr></table>
</div>
</body>
</html>
