Question

I have a web application(ASP.NET2.0 C#). Within it, I have a div that contains a checkbox list and a button.

I want to toggle the div viewing, so I got some javascript code online to help me.

Heres the code:

<script language='javascript'> var state = 'hidden';  function showhide(layer_ref) {      if (state == 'visible')      {         state = 'hidden';     }     else      {         state = 'visible';     }     if (document.all)      { //IS IE 4 or 5 (or 6 beta)         eval( 'document.all.' + layer_ref + '.style.visibility = state');     }     if (document.layers)      { //IS NETSCAPE 4 or below         document.layers[layer_ref].visibility = state;     }     if (document.getElementById && !document.all)      {         maxwell_smart = document.getElementById(layer_ref);         maxwell_smart.style.visibility = state;     } } </script> 

I call the function this way:

<a href='javascript://' onclick='showhide('AlertDiv');'>Choose Columns</a> 

When I use this function, it shows me the div with the button, but it doesn’t show me the checkboxlist….Any ideas on what’s going on?

Thank you.

Answer 1

Have you tried using display instead of visiblity?

For example, instead of:

document.getElementById(layer_ref).style.visiblity = 'hidden'; document.getElementById(layer_ref).style.visiblity = 'visible'; 

Use:

document.getElementById(layer_ref).style.display = 'none'; document.getElementById(layer_ref).style.display = 'block'; 

You will have to replace all your references to visiblity with display not just the getElementById version. You also may want to look into using jQuery which will handle your scenario with a few lines of code, plus no need for an onclick attribute to cloud you html.

<script type='text/javascript' src='jquery-1.3.2.js'> </script> <script type='text/javascript'>   $(document).ready(function() {     $('.toggleLink').click(function(e) {        e.preventDefault();        $('#AlertDiv').toggle();     });   }); </script> <a href='#' class='toggleLink'>Choose Columns</a>