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 (i.e. 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";
  });
});

encodedna.com/javascript/…

Nishant
– Nishant

2020-06-22 20:22:22 +00:00
Commented Jun 22, 2020 at 20:22 — Nishant
– Nishant, Commented Jun 22, 2020 at 20:22

pretzelhammer · Accepted Answer · 2020-06-22 20:23:15Z

3

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>

answered Jun 22, 2020 at 20:23

pretzelhammer

15.4k16 gold badges56 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

imvain2 · Accepted Answer · 2020-06-22 20:20:07Z

1

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

answered Jun 22, 2020 at 20:20

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Comments

Nishant · Accepted Answer · 2020-06-22 20:36:02Z

1

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'
  });
});

edited Jun 22, 2020 at 20:36

Nishant

4762 silver badges15 bronze badges

answered Jun 22, 2020 at 20:23

Martin Balke

763 bronze badges

Comments

Wisdom Adzorgenu · Accepted Answer · 2020-06-22 20:42:11Z

1

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

edited Jun 22, 2020 at 20:42

answered Jun 22, 2020 at 20:25

Wisdom Adzorgenu

114 bronze badges

Comments

luek baja · Accepted Answer · 2021-02-10 01:34:07Z

1

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

edited Feb 10, 2021 at 1:34

answered Jun 22, 2020 at 20:23

luek baja

1,71215 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related