Demo: Show and Hide a Div with Two Buttons

Show Layer Hide Layer

← tutorial on show hide layer Demo using single button →

JavaScript Top ↑

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

HTML Top ↑

<button type="button" id="show-layer">Show Layer</button>
<button type="button" id="hide-layer">Hide Layer</button>
<button type="button" id="image-show" aria-label="Show layer using image"><img src="images/show-layer.jpg" alt=""></button>
<div id="sub3" hidden>Message Box<br><a href="hide-layer3.php">Demo using single button</a><br><a href="hide-layer4.php">Demo two boxes &amp; single button</a></div>

Style Top ↑

#sub3{background-color:#f1f1f1;width:280px;padding:10px;color:#000;border:2px dashed #0000cc;}

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.

About the author   Watch on YouTube

Connect: