Forum Moderators: open
<script language="javascript">
<!--
var state = 'none';
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) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
In my body tags I have the following:
<a href="#" onclick="showhide('div1');"><img src="image.jpg"/></a>
<div id="div1" style="display: none;">Content goes here.</div>
The problem I am having is when I add more div tags (div2, div3, etc. When you click on an image it displays the content in the div tag fine, but while that div tag is displayed if you click on another image you have to click on it twice for it to display the content in its div tag
Is there a code I can put into the script or something to make this so you only have to click once?
Note I've eliminated all the legacy code, you just need to operate on document.getElementById. Also, return false from the function, this tells the browser not to navigate to the href (#, which in this case is page top).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload = function() {
var divs = new Array('div1','div2','div3');
for (i=0;i<=divs.length;i++) {
if (document.getElementById(divs[i])) {
document.getElementById(divs[i]).style.display='none';
}
}
};
function showhide(layer_ref) {
if (document.getElementById) {
hza = document.getElementById(layer_ref);
hza.style.display = (hza.style.display=='block')?'none':'block';
}
return false;
}
</script>
</head>
<body>
<p><a href="#" onclick="return showhide('div1');">div 1 image here</a></p>
<p><a href="#" onclick="return showhide('div2');">div 2 image here</a></p>
<p><a href="#" onclick="return showhide('div3');">div 3 image here</a></p>
<p id="div1" style="display:none;">Div 1 content goes here.</p>
<p id="div2" style="display:none;">Div 2 content goes here.</p>
<p id="div3" style="display:none;">Div 3 content goes here.</p>
</body>
</html>
window.onload = function() {
var divs = new Array('div1','div2','div3');
for (i=0;i<=divs.length;i++) {
if (document.getElementById(divs[i])) {
document.getElementById(divs[i]).style.display='none';
}
}
};
The problem with the original script is that "state" is a global variable, it is not the state of the div in question.
I don't have the conditions of my original encounter, will have to watch for it - it may be as simple as you mentioned, a scope issue, but yeah . . .works fine without onload!
cmarshall has brought this up in another context.
The code above works without the window.onload that sets styles only because the assigned div styles are inline. When you move them to an external style sheet, or in a <style> block at the head of the document, it will probably fail unless you set the styles via Javascript or use the getComputedStyle method mentioned in the above link.
