Demo: Alternate Between Two Div Layers

← tutorial on show hide layer

JavaScript Top ↑

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

HTML Top ↑

<button type="button" id="bt1">Show Box 3</button>
<div id="sub3" hidden>Message Box 3</div>
<div id="sub4">Message Box 4</div>

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: