Reputation: 2369
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.
Upvotes: 2
Views: 7407
Reputation: 26436
Some suggestions:
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>
Upvotes: 2
Reputation: 40265
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>
Upvotes: 2