[thelist] Javascript and hidden layers - odd onclick behaviour

Fri Feb 21 17:20:01 CST 2003

--
[ Picked text/plain from multipart/alternative ]
I'm playing with invisible layers. I have a link which toggles the 'glcodes'
layer's visibility, and within that layer, another link, which toggles the
'engproj' layer's visibility.

What's happening is that the first click displays the 'glcodes' layer, but I
have to click that link twice to display the 'engproj' layer. Then, when I
toggle the 'engproj' layer off, I have to click my original link twice to
toggle the 'glcodes' layer off.

Waddupwiddat?

Thanks! (general commentary on my coding style welcome, although I can't
guarantee I'll pay much attention ;)

joel

Here's my code:

<html>
<head><title>GLs in JavaScript</title></head>
<script language="javascript">
var state = 'hidden';

function showhide(layer_ref)
{
	if (state == 'visible')
	{
		state = 'hidden';
	} else
	{
		state = 'visible';
	}
eval( "document.all." + layer_ref + ".style.visibility = state");
}
</script>
<body>
<div id="glcodes" style="position:absolute; top:200px; left:400px;
visibility:hidden; background-color: #e8e8e8; padding: 10px; border-style:
solid; border-width: 2px; border-color: #039">
<p>These are the GL codes.</p>
<p><a href="javascript://" onclick="showhide('engproj');">Toggle engineering
projects</a></p>
</div>

<div id="engproj" style="position:absolute; top:200px; left:600px;
visibility:hidden; background-color: #d1d1d1; padding: 10px; border-style:
solid; border-width: 3px; border-color: #03f">
<p>These are the GL codes.</p>
</div>

<p><a href="javascript://" onclick="showhide('glcodes');">Toggle GL
codes</a></p>
</body>
</html>