CODEWITHSUNDEEP
javascripthtmlcss
Maaike
Maaike

Reputation: 83

button toggle display show hide

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

Upvotes: 3

Views: 1917

Answers (5)

Maik Lowrey
Maik Lowrey

Reputation: 17566

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>

Upvotes: 0

Maaike
Maaike

Reputation: 83

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

Upvotes: 1

Manoj M
Manoj M

Reputation: 415

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>

Upvotes: 0

nohupt
nohupt

Reputation: 11

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

Upvotes: 1

pierreavn
pierreavn

Reputation: 607

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

Upvotes: 1

Related Questions