I have created a webpage with two blocks. The second block will be hidden by default. Please see the figma file I have created to see what I mean hehehe

https://www.figma.com/proto/ktgi99oIHIietfVUSXu4Bb/Concept-First-LMS?page-id=0:1&node-id=115:20&viewport=212,-300,0.32&scaling=scale-down-width&starting-point-node-id=115:2

I want to show the second block and hide the first block (vice versa) when clicked the button.

CodePudding user response：

try to see this tutorial to Hide/Show an element with jQuery, with .toggle https://www.w3schools.com/jquery/eff_toggle.asp

CodePudding user response：

document.getElementById("btn1").addEventListener("click", hideBtn1);

function hideBtn1() {
  document.getElementById("btn1").classList.add('hide');
  document.getElementById("btn2").classList.remove('hide');
  
  document.getElementById("container1").classList.add('hide');
  document.getElementById("container2").classList.remove('hide');
}

document.getElementById("btn2").addEventListener("click", hideBtn2);

function hideBtn2() {
  document.getElementById("btn2").classList.add('hide');
  document.getElementById("btn1").classList.remove('hide');
  
  document.getElementById("container2").classList.add('hide');
  document.getElementById("container1").classList.remove('hide');

}

.btn-container {
display: flex;
justify-content: right;
}

.button {
height: 32px; width: 80px; padding: 16px; background: rgb(9,100,170); color: white; display: flex; justify-content: center; align-items: center; border-radius: 8px;
}

.button.hide {
  display: none
}

.content-container {
height: 80vh;
width: 100%;
display: flex; justify-content: center; align-items: center;
}

.container {
text-transform: uppercase; font-size: 32px; text-align: center}

.container.hide {
  display: none
}

<div class='btn-container'>
<div  id="btn1">Button 1</div>
<div  id="btn2">Button 2</div>
</div>
<div >
<div  id="container1">This is First Block</div>
<div  id="container2">This is Second Block</div>
</div>