How to toggle class on multiple elements with same class name on click

Question

I can not get this code to work.
I am trying to create a function that can listen to click on multiple elements with same class name, and then after click, toggle a specific class name on the next element with a specific class name.

I am trying to use a loop that loops through all the "buttons" (class="click-to-expand") and when you click a specific button, it should loop through the specific divs and toggle a class name on the next element with (class="expand").

Any help would be very appreciated!

var expandArray = document.querySelectorAll('.expand');

document.querySelectorAll('.click-to-expand').forEach(function(i) {
  i.addEventListener('click', function(e) {
    e.target.expandArray[0].classList.toggle("hidden");
  })
});

.hidden {display: none}

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

<br>

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

<br>

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

Abito Prakash · Accepted Answer · 2019-08-29 19:46:01Z

4

You can try this


var expandArray = document.querySelectorAll('.expand');
var buttonArray = document.querySelectorAll('.click-to-expand');

document.querySelectorAll('.click-to-expand').forEach(function(i) {
  i.addEventListener('click', function(e) {
    const clickedBtnIndex = [...buttonArray].indexOf(e.target);
    expandArray[clickedBtnIndex].classList.toggle("hidden");
  })
});

The logic is to find out the index of the button which was clicked and use the same index to find the element in expandArray for which"hidden" should be toggled.

answered Aug 29, 2019 at 19:46

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

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

1 Comment

Frank351 Over a year ago

I did not think about that. Thank you!

Collectives™ on Stack Overflow

How to toggle class on multiple elements with same class name on click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related