JavaScript Tutorials
Show and Hide a Layer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show/Hide Layer</title>
<script language="javascript">
function demoShowHideLayer() {
if(document.getElementById("demoLayerContent").style.visibility == "hidden"){
document.getElementById("demoLayerContent").style.visibility = "visible";}
else{
document.getElementById("demoLayerContent").style.visibility = "hidden";
}
}
</script>
<style type="text/css">
<!--
#demoLayerLinks {background:#999; padding:.2em .5em;font: 14px Arial, Verdana;}
#demoLayerLinks a {text-decoration:none; color:#fff; padding-right:2em;}
#demoLayerLinks a:hover {color:#ccc;}
#demoLayerContent {visibility:hidden; height:200px; width:100%; background:url(wall.gif) repeat-x; position:absolute;}
#demoLayerBottom {height:200px; width:100%; background:url(sky.gif) repeat-x;}
-->
</style>
</head>
<body>
<div id="demoLayerLinks"><a href="#" onclick="document.getElementById('demoLayerContent').style.visibility = 'visible';">show</a><a href="#" onclick="document.getElementById('demoLayerContent').style.visibility = 'hidden';">hide</a><a href="#" onClick="demoShowHideLayer();">show if hidden or hide if visible</a></div>
<div id="demoLayerContent"> </div>
<div id="demoLayerBottom"> </div>
</body>
</html>