Show and Hide Div Layers with JavaScript
JavaScript can show or hide a div or any other element in response to a button click. The original tutorial demonstrates two buttons, an image as a button, one toggle button, two boxes controlled together, and two boxes shown one at a time. All of those examples are retained.
<button type="button" id="show-layer">Show Layer</button>
Show or hide div layer by using JavaScript
For a simple binary state, the native hidden property is clearer than switching between display: inline and display: none. If a particular CSS display mode matters, changing style.display is still available.
Table of Contents
Div Tag · Positioning of Div · Mouseover Div Layer on links · CSS section
Show and Hide with Two Buttons Top ↑
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Show and hide layer</title>
<style>#sub3{background:#f1f1f1;width:280px;padding:10px;border:2px dashed #0000cc}</style></head>
<body>
<button type="button" id="show-layer">Show Layer</button>
<button type="button" id="hide-layer">Hide Layer</button>
<button type="button" id="image-show"><img src="images/show-layer.jpg" alt="Show layer"></button>
<div id="sub3" hidden>Message Box</div>
<script>
const box=document.getElementById('sub3');
const show=()=>{box.hidden=false;};
const hide=()=>{box.hidden=true;};
document.getElementById('show-layer').addEventListener('click',show);
document.getElementById('hide-layer').addEventListener('click',hide);
document.getElementById('image-show').addEventListener('click',show);
</script></body></html>
Using an Image as a Button Top ↑
The original image control is retained in the demo. Wrapping the image in a real button gives keyboard users the same activation behavior.
<button type="button" id="image-show"><img src="images/show-layer.jpg" alt="Show layer"></button>
One Button to Show or Hide Top ↑
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Toggle one layer</title></head><body>
<button type="button" id="bt1" aria-expanded="false">Show Layer</button>
<div id="sub3" hidden>Message Box</div>
<script>
const button=document.getElementById('bt1'); const box=document.getElementById('sub3');
button.addEventListener('click',()=>{box.hidden=!box.hidden; const visible=!box.hidden; button.textContent=visible?'Hide Layer':'Show Layer'; button.setAttribute('aria-expanded',String(visible));});
</script></body></html>
One Button and More Than One Layer Top ↑
Demo of managing two boxes by single button
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Toggle two layers</title></head><body>
<button type="button" id="bt1" aria-expanded="false">Show Layer</button><div id="sub3" hidden>Message Box 3</div><div id="sub4" hidden>Message Box 4</div>
<script>
const button=document.getElementById('bt1'); const boxes=[document.getElementById('sub3'),document.getElementById('sub4')];
button.addEventListener('click',()=>{const show=boxes[0].hidden; boxes.forEach(box=>{box.hidden=!show;}); button.textContent=show?'Hide Layer':'Show Layer'; button.setAttribute('aria-expanded',String(show));});
</script></body></html>
Two Layers, One Visible at a Time Top ↑
Demo of showing one layer at a time by single button
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Show one of two layers</title></head><body>
<button type="button" id="bt1">Show Box 3</button><div id="sub3" hidden>Message Box 3</div><div id="sub4">Message Box 4</div>
<script>
const button=document.getElementById('bt1'); const box3=document.getElementById('sub3'); const box4=document.getElementById('sub4');
button.addEventListener('click',()=>{const show3=box3.hidden; box3.hidden=!show3; box4.hidden=show3; button.textContent=show3?'Show Box 4':'Show Box 3';});
</script></body></html>
Questions Top ↑
For animated effects, see jQuery show/hide effects. For new projects, CSS transitions or animations can provide similar visual effects without requiring jQuery.
Event Handling onMouseOver and onMouseOut
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
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 | |