const accordions = document.querySelectorAll(".overview_accordion");

accordions.forEach((accordion, index) => {
  const toggle = accordion.querySelector(".overview_accordion-toggle");
  const content = accordion.querySelector(".overview_accordion-content");

  toggle.setAttribute("tabindex", "0");
  toggle.setAttribute("role", "button");
  toggle.setAttribute("aria-expanded", "false");

  const openAccordion = (el) => {
    const elContent = el.querySelector(".overview_accordion-content");
    el.classList.add("is-open");
    el.querySelector(".overview_accordion-toggle").setAttribute(
      "aria-expanded",
      "true",
    );
    elContent.style.height = elContent.scrollHeight + "px";
  };

  const closeAccordion = (el) => {
    const elContent = el.querySelector(".overview_accordion-content");
    el.classList.remove("is-open");
    el.querySelector(".overview_accordion-toggle").setAttribute(
      "aria-expanded",
      "false",
    );
    elContent.style.height = "0px";
  };

  const toggleAccordion = () => {
    const isOpen = accordion.classList.contains("is-open");

    accordions.forEach((item) => closeAccordion(item));

    if (!isOpen) {
      openAccordion(accordion);
    }
  };

  toggle.addEventListener("click", toggleAccordion);

  toggle.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggleAccordion();
    }
  });

  if (index === 0) {
    setTimeout(() => openAccordion(accordion), 100);
  }
});