Hiding Layers

See also Expand & Collapse

Using a simple script will allow you to hide and show a specific layer 

<script type="text/javascript">

function showLayer(id) {
document.getElementById(id).style.visibility = "visible"
}
 
function hideLayer(id) {
document.getElementById(id).style.visibility = "hidden"
}

</script>
Click the skull

<img src="skull.gif" style="visibility:visible" onclick="hideLayer('Layer')" onmouseout="showLayer('Layer')">

<div id="Layer"><IMG src="pic.jpg">or Your Text</div>

The following exmple shows a slightly different method using a single function which inverts the current visibility status

Using Onmouseover/Onmouseout or Onclick

<script type="text/javascript">

function showHide(layerid){
if(document.getElementById(layerid).style.visibility == "visible"){
document.getElementById(layerid).style.visibility = "hidden"
}
else{
document.getElementById(layerid).style.visibility = "visible"
}
}

</script>

<span onmouseover="showHide('Layer2')" onmouseout="showHide('Layer2')">Onmouseover/Onmouseout</span>

or

<span onclick="showHide('Layer2')">Onclick</span>

<div id="Layer2" style="visibility: hidden" >Some text and other stuff</div>

The above examples use the visibility property, the following uses the display property.

The difference between the two is that when the visibility property is set to hidden the element is still rendered in the layout of the document as if it was visible whereas when the display property is set to none the element is not rendered until the display property is set to block, or inline.

Click Me
Dummy Div
Click Me
Dummy Div