Javascript – Show hide layers in HTML

Certain content with data can be presented in a layer. This HTML page is having number of layers. Each layer can work as an individual of content, data, images, colors and links.

Layer can be used for different collection of HTML pages in a single HTML page. This can be done by hiding all layer and show only a single particular layer to a user at a time.

Layer can be hidden by the visibility property of style of <div> tag. Old browser uses layer as a tag. But <div> tag is mostly used for making layer in HTML page.

Hiding layer in <div> tag

<div id="layer1">layer 1</div>

document.getElementById("layer1").style.visibility="hidden";

Show layer in <div> tag

<div id="layer1">layer 1</div>
document.getElementById("layer1").style.visibility="visible";

Demo

<html>
<head>
<title>Show hide layer HTML</title>

<style type="text/css">
#Layer1 {
    background:#00CCCC;
    z-index:1;
}
#Layer2 {
    background:#FF9933;
    z-index:2;
}
#Layer3 {
    background:#3399CC;
    z-index:3;
}
</style>

<script>
function hideLayer(ObHide)
{
  document.getElementById(ObHide).style.visibility="hidden";
}

function showLayer(ObShow)
{
  document.getElementById(ObShow).style.visibility="visible";
}
</script>
</head>

<body>

<div id="Layer1" >Layer 1</div>
<div id="Layer2">Layer 2</div>
<div id="Layer3">Layer 3</div>
<br>
<br>
<input type="button" name="ly1"  value="hide 1" onClick="hideLayer('Layer1')">
<input type="button" name="ly1"  value="hide 2" onClick="hideLayer('Layer2')">
<input type="button" name="ly1"  value="hide 3" onClick="hideLayer('Layer3')">

<input type="button" name="ly1"  value="show 1" onClick="showLayer('Layer1')">
<input type="button" name="ly1"  value="show 2" onClick="showLayer('Layer2')">
<input type="button" name="ly1"  value="show 3" onClick="showLayer('Layer3')">
</body>
</html>
Bookmark  

 

3 Responses to “Javascript – Show hide layers in HTML”

  1. yogesh says:
    February 7, 2009 at 10:41 am

    If 3 layer is on same position have to show, how can we do this. Tab making layer

  2. fizzgig says:
    May 19, 2010 at 2:04 am

    Is it possible to hide or show several divs with one click? I tried onClick=\"showLayer(\’Layer1\’,\’Layer1\’)\" and several variations, but none seem to work properly. I\’d really appreciate any info.

    Thanks!

  3. Aditya vyas says:
    June 3, 2010 at 2:48 pm

    Hi,
    Thanks So much for this code.

Leave a Reply

Security Code:

 

  Random Post