Show hide div layer onclick of buttons

We can control a layer by connecting it to buttons. We can display or hide the layer by clicking the buttons. To create and manage a layer we will use div tags.

<input type=button name=b1 value='Click Me' onclick="any_function();";>

By using style property of the page we can control the layer.

More on Div Tag Div Tag Positioning of Div Mouseover Div Layer on links Show & Hide Div Layer Help message Layer

We will use one on page style sheet for our div tag by defining its layout properties. We will keep this style definition inside our head tags. For more details on Style property visit our CSS section. We will use one JavaScript function to manage the property of the div tag identified by its id. Here is the code


<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
div {
position: absolute;
left: 100px;
top: 200px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";>
<input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>

<div id="sub3">Message Box</div>

</body>
</html>

Using JQUERY show hide effects we can manage layers easily

Using image as button

In the above code we can use image as button to show and hide layers. This part is included in the above demo. Here is the code to add image in place of button.

<input type=image name=imb src='images/show-layer.jpg'  onclick="setVisibility('sub3', 'inline');";>

Using one single button to show or hide the message layer

The above code will display two buttons one of showing the layer and other for hiding the layer. We can combine the functionality of these two buttons to one and keep one button which can be toggled to show or hide layer. The caption displayed over the button can be changed by using value property of the button id. We will change this data also and display the appropriate label to give the message.

document.getElementById('bt1').value = 'Hide Layer';

By this we can change the text written over the button
We can manage the display of layer by this .


document.getElementById(id).style.display = 'none'; // To hide the layer
document.getElementById(id).style.display = 'inline'; // To display the layer

Here is the code of above demo

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Demo for showing and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Demo Show layer, Demo hide layer, display div, hide div,
 button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}

</script>
</head>
<body>

<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility('sub3');";> 

<div id="sub3">Message Box</div>
<br><br>
</body>
</html>

Using single button and more than one layer ( boxes )

To manage more than one layer we can use the same function and pass two ids of the message layer to the function. Inside the function in place of managing one layer we will mange two layers.
Inside the style declaration we will be using relative positioning as we will be displaying two layers. The code is here

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<html>
<head>
<title>Demo of Show hide div more than one layer onclick of a single button</title>
<META NAME="DESCRIPTION" CONTENT="Demo for managing multiple layers from single button">
<META NAME="KEYWORDS" CONTENT="Demo more than one box, single button, show hide layer">
<style type="text/css">
div {
position: relative;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>


<script language="JavaScript">
function setVisibility(id1,id2) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'inline';
}
}

</script>
</head>
<body>

<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility('sub3','sub4');";> 

<div id="sub3">Message Box 3</div>

<br><br><br><br><br>
<div id="sub4">Message Box 4</div>
<br><br>
</body>
</html>

Two layers showing one at a time with button click

Instead of using common style for div layers , we will keep individual style property of the layers so it can be managed easily. Here we will keep one layer hidden and one visible at the time of page loading.

Then Inside the if condition we will change the status of the layers and make one visible and one hidden. So on each click one layer will be visible at a time.

<script language="JavaScript">
function setVisibility(id1,id2) {
if(document.getElementById('bt1').value=='Show Box 3'){
document.getElementById('bt1').value = 'Show Box 4';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Show Box 3';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'inline';
}
}
</script>

We will change the label or the value of the button accordingly. Changes in style property is here

<style type="text/css">
#sub3{
position: relative;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}

#sub4{
position: relative;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
//display: none;
}
</style>

Showing & hiding div layers on button clicks

Using image as button

Using one single button to show or hide the message layer

Using single button and more than one layer ( boxes )

Two layers showing one at a time with button click