How can I target each item in a list with collapsible items?

Question

I have a list of div elements, each containing a header and a body section. Only the header of each item is initially displayed, and when clicked, the corresponding body should appear below the header. When the header is clicked again, the body should disappear. The logic I use is to append/remove the class name "extended" on each list item, in order to display and hide the body section through CSS.

Now, I am trying to create a dynamic script to allow virtually infinite list entries, without having to target each item specifically, but I cannot get it to work for all items.

HTML

JavaScript

var chapter = document.getElementsByClassName('chapter')[0];
var chapterHeader = document.getElementsByClassName('chapter-header')[0];

chapterHeader.addEventListener("click", function(){
    chapter.classList.toggle("extended");
});

The code above works fine for the first item but obviously not for the rest. Any ideas ? I'm interested in vanilla JavaScript code. Thanks in advance.

user_13573444 · Answer

You need to use method forEach() to work with a collection of classes. And also method closest(), which allows you to refer to the specified parent of the current element.

Try this it code:

let chapterHeader = document.querySelectorAll('.chapter-header');

chapterHeader.forEach(function(chapterHeader_current, index) {
  chapterHeader_current.addEventListener('click', function() {
    let current_chapter = this.closest('.chapter');
    current_chapter.classList.toggle("extended");
  });
});

Admin · Answer

Event bubbling is the keyword.

Add only one event to the container. When you click on the container it first handles the inner element and then the outer elements.

let list = document.getElementById("myList");

list.addEventListener("click", function(event) {
  // Do stuff with target
  console.log(event.target.className);

})


  
    Chapter header 1
    Chapter body 1
  
  
    Chapter header 2
    Chapter body 2
  
  
    Chapter header 3
    Chapter body 2

user_1695062 · Answer

something like this i believe

chapterHeader.addEventListener("click", function(this){
        this.nextSibling.classList.toggle("extended");
    });

How can I target each item in a list with collapsible items?

3 Answers