SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Events

Showing & hiding div layers on button clicks

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.

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 demo of show hide layer

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 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

Demo of controlling the display of layer by using single button

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.

Demo of managing two boxes by single button

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>

Number of User Comments : 27


Google+

Tapash13-05-2011
this example is very simple to understand.Thank you
platnm04-07-2011
is there a way to make it so they can click the same link/button to hide or show it?
smo05-09-2011
Yes, it is added now. Check the demo to see how single button is used to display and hide a layer
Natalie22-11-2011
When you use more than one of these on a page, and have one open, you have to double click to open a second one. Is there a way to fix this so you only need to click once?
Mark Jacobs29-11-2011
Thank you so much..saved me a lot of time. A little tinkering and I have a show/hide one the company intranet home page...
Yoru24-01-2012
This is awesome, exactly the information I needed to get a certain page done!
kanfwood03-02-2012
thanx it was helpfull to me
Stefan22-02-2012
Thanks! This helped me a lot :)
Alice27-02-2012
Hi! This is very useful thanks! Is there a way to achieve the same with class rather than id? I really need your help! thanks
joey Pogi22-04-2012
This is great help... thank you superman...
Kevin29-06-2012
Hi,
Very nice! But I want to animate it
what to do?
Bhagyashri25-10-2012
wow....
This is what i wanted to do...:)
Thanks... It helped me a lot...
greg16-12-2012
anyone have an idea for make more that one box.
bt1 for one box
bt2 for one box
smo16-12-2012
It is added, you can use single button to manage two layers. Same way you can use two buttons to mange two layers.
hepa21-12-2012
great code ! it helps a lot !
I wonder how to make it works with a text-link and not with a button ?
showotoaksesuar18-02-2013
THANX BRO! VERY GOOD CODES!
Lohith12-06-2013
Thanks alot....
Odj201317-11-2013
Thank you very much for the tutorial!
lusifer18-11-2013
i have 4 dive and by click on heading of any div show whole content of the div and hide other div and we again click on same heading then we get all the div
smo18-11-2013
You can use JQuery for this and there is a FAQ script you can download from here.
Henrik Kryger Pallesen04-12-2013
You just saved my day. Thank you :-)
Ashesh Sharma04-04-2014
Thanks Its amusing



Ashesh Sharma
Nivediny29-05-2014
This is good but i need for merge the div after click a button(concept : there is two div for guest user. after an admin login into the site the second div have to hide and first div have to full fill the place.)can any one know how to do this
smo29-05-2014
By using server side script this has to be done. Once admin login then based on session present or not we can decide which div layer to display. If admin not logged in then different layer can be shown.
Alan C Kmiecik04-06-2014
Change images be used for the buttons?
sachin18-06-2014
Really helpful and easy to understand thanks bro..
atsweetpoem23-07-2014
If in css property is overflow:auto then how to show and hide the div.
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked




Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer