toggle div visibility with a checkbox list

Question

Hi, 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>

Answer 2

Some suggestions:

1. You really should consider using a javascript library like ASP.NET AJAX or JQuery. This will help to get the browser specific code out of the way.
2. Base the visibility on the state of the checkbox, rather than just toggling it.
3. "display" is probably a better style in this situation instead of "visibility". If you use "visibility" then you will just get a blank area where the "layer" should be when it's invisible.
4. Instead of a "layer reference" you probably want to pass in the id of the div tag and the id of the checkbox.

Example in asp.net ajax:

Here would be your checkbox:

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />

Here is the area you want to show/hide:

<div id='mylayer'>content</div>

Here is your function:

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>