how to add class to accordion element?

Question

I have an accordion. When you click on the accordion header, it opens and the active class is added to the header. I need the active class to be added to the entire item of the accordion that is clicked on as well. How can i do this? I need to set the active class for "accordion-item"

const accordionItemHeaders = document.querySelectorAll(
  ".accordion-item-header"
);

accordionItemHeaders.forEach((accordionItemHeader) => {
  accordionItemHeader.addEventListener("click", () => {
    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if (accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    } else {
      accordionItemBody.style.maxHeight = 0;
    }
  });
});

user_557019 · Answer

You probably want the .closest() method.

const accordionItemHeaders = document.querySelectorAll(
  ".accordion-item-header"
);

accordionItemHeaders.forEach((accordionItemHeader) => {
  accordionItemHeader.addEventListener("click", () => {
    accordionItemHeader.classList.toggle("active");
    accordionItemHeader.closest(".accordion-item").classList.toggle("active"); // NEW
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if (accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    } else {
      accordionItemBody.style.maxHeight = 0;
    }
  });
});

However, an alternative would be to use the details element since that will do everything you need it to without any JavaScript and add an open attribute when the contents are visible.

how to add class to accordion element?

1 Answers