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!
<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>

Open in new window

gilaligAsked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
You've got an errant ";" in this line:

   state1 = state1 ==  'none'; ? 'block' : 'none';

Also NS4 doesn't support the style object. Besides, branching for IE4 and NS4 these days is rather silly.

Try this:

function showhide1(layer_ref) {
   if(!document.getElementById) return;
   var s = document.getElementById(layer_ref).style;
   s.display = (s.display == 'none') ? 'block' : 'none';
}

Open in new window

0
 
WysGCommented:
Line 6 reads
state1 = state1 ==  'none'; ? 'block' : 'none';
Notice the ; after 'none'

Should be
state1 = state1 ==  'none' ? 'block' : 'none';

Or clearer
state1 = (state1 ==  'none' ? 'block' : 'none');

0
 
Göran AnderssonCommented:
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:
<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>

Open in new window

0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Göran AnderssonCommented:
> 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.
0
 
David S.Commented:
@GreenGhost

IE5+ support document.getElementById().
0
 
tommytcchanCommented:
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
0
 
Göran AnderssonCommented:
@Kravimir

Ok, then the comment in the original code was incorrect.
0
 
David S.Commented:
@GreenGhost

Yeah, it is incorrect.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.