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.

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.

• asp
• javascript
• viewstate
• visibility
• checkboxlist

Share Improve this question Follow asked Apr 1, 2009 at 14:26 zohairzohair 2,3691010 gold badges3535 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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>

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