How to make a button toggle display with click event listener?

Question

I have about 20 products, each product has a button and description box. I have looped through added a click event listener that displays the product description box once the button is clicked.

How can I give the button the ability to hide the description box as well (ie toggle display)?

Here is my code:

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display = "block";
  });
});

Answer 1

You can use the button click handler to toggle a class on the description text to toggle its visibility. Full working example:

 const descBtns = document.querySelectorAll('.desc-btn'); descBtns.forEach((btn) => { btn.addEventListener('click', (e) => { descText = btn.nextElementSibling; descText.classList.toggle('show'); }); });

 .desc-btn { display: block; margin-bottom: 10px; }.desc { display: none; }.desc.show { display: block; }

 <button class="desc-btn">desc btn</button> <p class="desc">description here</p> <button class="desc-btn">desc btn 2</button> <p class="desc">description here 2</p> <button class="desc-btn">desc btn 3</button> <p class="desc">description here 3</p>

Answer 2

You can simply toggle a class on the box. Create a css class that contains: display:block. Then toggle that class on the classList of the box.

.show{display:block;}

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn)=>{
  btn.addEventListener('click', (e)=>{
    descriptionBox = btn.nextElementSibling;
    descriptionBox.classList.toggle("show");
  });
});

Answer 3

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach(element => {
  element.onclick = function (e) {
    if (this.style.display === "block") {
      this.style.display = "none";
    } else {
      this.style.display = "block";
    }
  };
});

Answer 4

You can use the tertiary operator to ask if the box is currently being displayed. If it is the block will be set to hidden, if it is not then it will be set to display block. This is a common design pattern in other JS frameworks so it might be worth trying it out.

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display === "block" ? discriptionBox.style.display = 'hidden' :
      discriptionBox.style.display = 'block'
  });
});

Answer 5

Add two event listeners for the button with class "hide-background", "show-background". When any is clicked, change element class to the other.

.show-background div{ display:block};
.hide-background div{ display:none};

const showBgnd = document.getElementsByClassName('show-background');
const hideBgnd = document.getElementsByClassName('hide-background');

showBgnd.addEventListener('click', (e)=>{
  showBgnd.setAttribute("class","hide-background");
});

hideBgnd.addEventListener('click', (e)=>{
  hideBgnd.setAttribute("class","show-background");
});