Accordion

Classic + open more than one

document.addEventListener("DOMContentLoaded", function () {
  const accordions = document.querySelectorAll(".accordion");
  const multipleCheckbox = document.getElementById("multiselect");

  accordions.forEach(function (accordion) {
    const expandIcon = accordion.querySelector(".expand-icon");
    const collapseIcon = accordion.querySelector(".collapse-icon");
    const description = accordion.querySelector(".description");
    const titleSection = accordion.querySelector(".title-section");

    // Collapse all sections initially
    description.style.display = "none";
    collapseIcon.style.display = "none";

    // Expand the first accordion by default
    if (accordion === accordions[0]) {
      description.style.display = "block";
      expandIcon.style.display = "none";
      collapseIcon.style.display = "inline-block";
    }

    // Toggle accordion state function
    function toggleAccordion() {
      const isExpanded = description.style.display === "block";

      if (!multipleCheckbox.checked) {
        // Collapse all other accordions
        accordions.forEach(function (otherAccordion) {
          if (otherAccordion !== accordion) {
            const otherDescription =
              otherAccordion.querySelector(".description");
            const otherExpandIcon =
              otherAccordion.querySelector(".expand-icon");
            const otherCollapseIcon =
              otherAccordion.querySelector(".collapse-icon");

            otherDescription.style.display = "none";
            otherExpandIcon.style.display = "inline-block";
            otherCollapseIcon.style.display = "none";
          }
        });
      }

      // Toggle the current accordion
      description.style.display = isExpanded ? "none" : "block";
      expandIcon.style.display = isExpanded ? "inline-block" : "none";
      collapseIcon.style.display = isExpanded ? "none" : "inline-block";
    }

    // Click event for expand icon
    expandIcon.addEventListener("click", toggleAccordion);

    // Click event for collapse icon
    collapseIcon.addEventListener("click", toggleAccordion);

    // Click event for the title section
    titleSection.addEventListener("click", toggleAccordion);
  });
});

HTML AccordionCSS AccordionTS Accordion