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();";>
Show or hide div layer by using JavaScript document display property inline or none value.
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.
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 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';We can manage the display of layer by this .
// To hide the layer
document.getElementById(id).style.display = 'none';
// To display the layer
document.getElementById(id).style.display = 'inline'; Here is the code of above demo
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Demo for showing and hiding div">
<META NAME="KEYWORDS" CONTENT="Demo Show layer, 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
<html>
<head>
<title>Demo of Show hide div </title>
<META NAME="DESCRIPTION" CONTENT="Demo for managing layers">
<META NAME="KEYWORDS" CONTENT="Demo more than one box">
<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.
Demo of showing one layer at a time by single button
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>
Questions
- How can I show or hide a layer using JavaScript?
- What are the different methods to toggle the visibility of a layer in JavaScript?
- Can I use CSS classes to show and hide layers in JavaScript?
- How can I hide a layer by default and show it when a specific event occurs?
- Is it possible to animate the showing and hiding of a layer in JavaScript?
- Are there any JavaScript libraries or frameworks that can help with showing and hiding layers?
- What are some best practices for efficiently showing and hiding layers in JavaScript?
- Can I show or hide multiple layers simultaneously using JavaScript?
- How can I control the visibility of a layer based on user input or interaction?
- Are there any cross-browser considerations when implementing show/hide functionality in JavaScript?
Event Handling onMouseOver and onMouseOut
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
| Tapash | 13-05-2011 |
| this example is very simple to understand.Thank you | |
| platnm | 04-07-2011 |
| is there a way to make it so they can click the same link/button to hide or show it? | |
| smo | 05-09-2011 |
| Yes, it is added now. Check the demo to see how single button is used to display and hide a layer | |
| Natalie | 22-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 Jacobs | 29-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... | |
| Yoru | 24-01-2012 |
| This is awesome, exactly the information I needed to get a certain page done! | |
| kanfwood | 03-02-2012 |
| thanx it was helpfull to me | |
| Stefan | 22-02-2012 |
| Thanks! This helped me a lot :) | |
| Alice | 27-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 Pogi | 22-04-2012 |
| This is great help... thank you superman... | |
| Kevin | 29-06-2012 |
| Hi, Very nice! But I want to animate it what to do? | |
| Bhagyashri | 25-10-2012 |
| wow.... This is what i wanted to do...:) Thanks... It helped me a lot... | |
| greg | 16-12-2012 |
| anyone have an idea for make more that one box. bt1 for one box bt2 for one box | |
| smo | 16-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. | |
| hepa | 21-12-2012 |
| great code ! it helps a lot ! I wonder how to make it works with a text-link and not with a button ? | |
| showotoaksesuar | 18-02-2013 |
| THANX BRO! VERY GOOD CODES! | |
| Lohith | 12-06-2013 |
| Thanks alot.... | |
| Odj2013 | 17-11-2013 |
| Thank you very much for the tutorial! | |
| lusifer | 18-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 | |
| smo | 18-11-2013 |
| You can use JQuery for this and there is a FAQ script you can download from here. | |
| Henrik Kryger Pallesen | 04-12-2013 |
| You just saved my day. Thank you :-) | |
| Ashesh Sharma | 04-04-2014 |
| Thanks Its amusing Ashesh Sharma | |
| Nivediny | 29-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 | |
| smo | 29-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 Kmiecik | 04-06-2014 |
| Change images be used for the buttons? | |
| sachin | 18-06-2014 |
| Really helpful and easy to understand thanks bro.. | |
| atsweetpoem | 23-07-2014 |
| If in css property is overflow:auto then how to show and hide the div. | |
| Simon | 28-10-2014 |
| Is it possible to change the buttons for images? Thanks | |
| smo | 30-10-2014 |
| Image can be used in place of buttons. One example by using image is added in first demo. | |
| Andrew King | 25-11-2014 |
| I wish to have two buttons, each opening a different box in different positions. How do you specify the two positions? Also what specifies Sub3, Sub4 etc.? | |
| Ed Newms | 06-01-2015 |
| Great code. I just need one more thing. I need the button click to open a page in a new window. So really a link more than a button but either way. Thanks | |
| smo | 06-01-2015 |
| You can use link or button to open a page in new window. | |
| Bidyut | 05-02-2015 |
| On button click the div appears...n i have a form in that div..while pressing the submit buton the div gets hidden..so how do i keep that div remain there..n i want a back button as well..kindly help..thnx | |
| Valter | 26-03-2015 |
| Hi, I have a new question. How to make a button to show AND hide two boxes at once (on click)? Meaning: when page loads one box is visible and the other is hidden. On click the visible box turn on hidden and the hidden go visible. Any suggestion or script is highly appreciated. Cheer Valter | |
| achoth | 07-08-2015 |
| I did two buttons, each controlling a layer. Buttons should read "Reports"/"Close Reports" (on click) and "Reviews"/"Close Reviews" but both say "Close Reviews" when clicked. Help! (Your "Same way you can use two buttons to mange two layers." comment didn't help.) Thanks | |