button toggle display show hide

Try with the following code:

#first{
  display: block; /* <--- change */
}
#second {
  display: none;
}

const firstDiv = document.getElementById("first");
const secondDiv = document.getElementById("second");
document.getElementById("toggle").onclick = function () {
  if (firstDiv.style.display === "none") {
    firstDiv.style.display = "block";
    secondDiv.style.display = "none";
  } else {
    firstDiv.style.display = "none";
    secondDiv.style.display = "block";
  }
}

There's lots of ways to do this. One common way I've seen in various templates is to add and remove classes. Another way is to call the function from the button's onclick attribute. But my favorite is to write a function that requires no editing of the div HTML because I don't want to interfere with the HTML guy's work, I just want to put functioning code in there. (BTW, I am positive there is a more elegant way to write this, but here ya go!)

const firstDiv = document.querySelector("#first");
const secondDiv = document.querySelector("#second");
const firstButt = document.querySelector("#toggle");
const secondButt = document.querySelector("#toggletoo");
firstButt.addEventListener("click",toggleDivShowHide);
secondButt.addEventListener("click",toggleDivShowHide);
function toggleDivShowHide() {
    if (firstDiv.style.display !== "none") {
      firstDiv.style.display = "none";
      secondDiv.style.display = "block";
  } else {
      firstDiv.style.display = "block";
      secondDiv.style.display = "none";
  }
}

You're saying "if the first div is set to none, then set it to block and set the second div to none. Otherwise, do the opposite."

I tried something different, this is working :)))

  <div id="first"  style="display:none;"> This is the FIRST div</div>
  <div id="second"  style="display:none;"> This is the SECONDdiv</div>
<input type="button" name="answer" value="Show first div and hide second div" onclick="showDivOne()" />
<input type="button" name="answer" value="Show second div and hide first div" onclick="showDivTwo()" />

function showDivOne() {
   document.getElementById('first').style.display = "block";
  document.getElementById('second').style.display = "none";
}
function showDivTwo() {
   document.getElementById('second').style.display = "block";
  document.getElementById('first').style.display = "none";
}

https://codepen.io/MaaikeNij/pen/vYeMGyN

button toggle display show hide

Related

Recent Posts