button toggle display show hide

user_5528961 0
Viewed 197

I want to show-hide the display of these layers with a button click. I can't figure out how to do it with 2 buttons, and 2 divs...

Html:

<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<button id="toggle">Show first div and hide second div</button>
<button id="toggletoo">Show second div and hide first div</button>

Css:

#first {
  display: none;
}
#second {
  display: none;
}

Js:

const targetDiv = document.getElementById("first");
const btn = document.getElementById("toggle");
btn.onclick = function () {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "block";
  } else {
    targetDiv.style.display = "none";
  }
}

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

css html javascript
5 Answers

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";
  }
}
user_117873130

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."

user_95817180

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

user_55289610

Correction: you should add event Listener for both toggle & toggletoo.

Solution: solution with reusable code.

const Toggles = document.querySelectorAll('.toggle');
const Hides = document.querySelectorAll('.hide');
Toggles.forEach((el) => {
    el.addEventListener("click", (e) => {
        Hides.forEach((el) => {
            el.parentElement.firstElementChild.classList.add('hide');
        });
        e.target.parentElement.firstElementChild.classList.toggle('hide');
    });

})
.hide {
    display: none;
}
<div>
    <div class="hide">This is the FIRST div</div>
    <button class="toggle">Show first div and hide first div</button>
</div>
<div>
    <div class="hide">This is the SECOND div</div>
    <button class="toggle">Show second div and hide first div</button>
</div>
<div>
    <div class="hide">This is the Third div</div>
    <button class="toggle">Show Third div and hide first div</button>
</div>
<div>
    <div class="hide">This is the Fourth div</div>
    <button class="toggle">Show Fourth div and hide first div</button>
</div>

user_151426130

For precisely such cases, javascript has the toggle function. I rewrite your code a little bit.

const btns = document.querySelectorAll(".toggleBtn");

btns.forEach(b => {  
  b.onclick = function (e) {
    reset();
    console.log(e.target.getAttribute('data-target'))
    const target = e.target.getAttribute('data-target');
    const t = document.querySelector('#' + target);    
    t.classList.toggle('hide');    
  }  
});

function reset() {
  const divs = document.querySelectorAll('.out');  
  divs.forEach(d => d.classList.add('hide'))
}
.hide {
  display: none;
}
<div id="first" class="out hide">This is the FIRST div</div>
<div id="second" class="out hide">This is the SECOND div</div>

<button class="toggleBtn" data-target="first">Show first div and hide second div</button>
<button class="toggleBtn"  data-target="second">Show second div and hide first div</button>

user_148071110
Related