|
Show Or Hide Layers (DIVs) |
|
|
|
|
Javascript -
Helpful Javascript
|
|
Written by Jason
|
|
Jan 04, 2008 at 09:40 AM |
This code allows you to toggle the visibility of any div layer on a webpage.
Insert the following code into your HTML head section before the </head tag.
<script type="text/javascript">
<!--
// Toggle Divs
// http://jasonlau.biz
function jlToggleDivs(jlDivID, jlState) // 1 visible, 0 hidden
{
if(jlState == 0)
{
// optional message when toggled off
// alert('');
}
else if(jlState == 1)
{
// optional message when toggled on
// alert('');
}
if(document.layers) //NN4+
{
document.layers[jlDivID].visibility = jlState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(jlDivID);
obj.style.visibility = jlState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[jlDivID].style.visibility = jlState ? "visible" : "hidden";
}
}
// -->
</script>
To use this script, simply call the function jlToggleDivs('{DIV ID}',{VISIBILITY STATE}) where {DIV ID} is the id attribute of the layer and {VISIBILITY STATE} is either 1 for visible or 0 for hidden.
Usage Examples:
Show it! Hide it!
Create a div layer in the document's body and id it with a unique name.
<div id="example" style="visibility:hidden">Test</div>
In the above example div, I have set the visibility to be hidden initially, but the style attribute is optional and can be deleted if desired.
Create links to toggle the layer visibility.
<a href="javascript:void(0)" onClick="jlToggleDivs('example',0)">Hide</a>
<a href="javascript:void(0)" onClick="jlToggleDivs('example',1)">Show</a>
Hide a layer when the page loads by calling the script in the document's body tag:
<body onLoad="jlToggleDivs('example',0);">
or by using javascript in the document's body:
<script type="text/javascript">window.onload = "jlToggleDivs('example',0); </script>
Please login or register to add comments |
