JSFiddle - React, Tailwind, and code Playground

by Haze32

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const accordions = document.querySelectorAll(".accordion")

  accordions.forEach((accordion) => {
    const header = accordion.querySelector(".accordion-header")
    const content = accordion.querySelector(".accordion-content")
    const toggle = accordion.querySelector(".accIcon")

    header.addEventListener("click", function () {
      // Toggle
      if (content.style.maxHeight) {
        content.style.maxHeight = null
        header.classList.remove("active")
        console.log("close")
      } else {
        content.style.maxHeight = content.scrollHeight + "px"
        header.classList.add("active")
        console.log("open")
      }
    })
  })
})