gilalig
asked on
Hide a specific div
A previous question was answered successfully when changing the visibility of a specific div but now I have changed the function so that it hides the div so that the div won't take up space. Unfortunately, now the function does not work.
Any help would be greatly appreciated!
Any help would be greatly appreciated!
<script type="text/javascript">
var state1 = 'none';
function showhide1(layer_ref) {
state1 = document.getElementById(layer_ref).style.display ;
state1 = state1 == 'none'; ? 'block' : 'none';
if (document.getElementById) { // any normal browser nowadays
document.getElementById(layer_ref).style.display = state1;
} else if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state1");
} else if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].style.display = state1;
}
}
</script>
<a href="javascript:;" onclick="showhide1('Content_<%=rsComments("MsgID")%>');"><%=rsComments("MsgHeader")%></a>
<div id="Content_<%=rsComments("MsgID")%>" style="display:none;">
<%=rsComments("MsgContent")%>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
As you are getting the current value from the element instead of the variable, you should skip the global variable and keep it local in the function. Any global variable is a potential conflict with other scripts.
Netscape 4 can not remove elements from the flow, as it doesn't reflow the layout. So, you have to drop the support for Netscape 4. You can keep the support for IE5, if you like.
In order for the IE5 support to work, you have to get the style object from the element first, so that you can use that both for getting and setting the value:
Netscape 4 can not remove elements from the flow, as it doesn't reflow the layout. So, you have to drop the support for Netscape 4. You can keep the support for IE5, if you like.
In order for the IE5 support to work, you have to get the style object from the element first, so that you can use that both for getting and setting the value:
<script type="text/javascript">
function showhide1(layer_ref) {
var s = null;
if (document.getElementById) { // any normal browser nowadays
s = document.getElementById(layer_ref).style;
} else if (document.all) { //IS IE 4 or 5 (or 6 beta)
s = document.all(layer_ref).style;
}
if (s != null) {
s.display = (s.display == 'none' ? 'block' : 'none');
}
}
</script>
> you should skip the global variable and keep it local in the function
Well, as you see from the code I posted, you actually don't need a variable for that at all.
Well, as you see from the code I posted, you actually don't need a variable for that at all.
@GreenGhost
IE5+ support document.getElementById().
IE5+ support document.getElementById().
you might want to install firebug as well to check that the id names are indeed what you want. firebug is a firefox add-on for debugging pages
@Kravimir
Ok, then the comment in the original code was incorrect.
Ok, then the comment in the original code was incorrect.
@GreenGhost
Yeah, it is incorrect.
Yeah, it is incorrect.
state1 = state1 == 'none'; ? 'block' : 'none';
Notice the ; after 'none'
Should be
state1 = state1 == 'none' ? 'block' : 'none';
Or clearer
state1 = (state1 == 'none' ? 'block' : 'none');