document.addEventListener("DOMContentLoaded", function () {
  // Select all FAQ contents and collapse them initially
  const faqContents = document.querySelectorAll(".individual-faq-content");
  faqContents.forEach((content) => {
    content.style.maxHeight = "0px";
    content.style.overflow = "hidden";
    content.style.transition =
      "max-height 0.3s ease-out, opacity 0.3s ease-out";
    content.style.opacity = "0";
  });

  // Select all FAQ buttons
  const faqButtons = document.querySelectorAll(".faq-button");

  faqButtons.forEach((button) => {
    button.addEventListener("click", function () {
      // Find the corresponding FAQ content
      const faqContent = this.closest(".collapsable-faq").querySelector(
        ".individual-faq-content"
      );

      // Define the background images for collapsed and expanded states
      const collapsedBg = "url('https://xwiki.com/en/download/Snippets/WebHome/chevron-down-solid.svg')"; // Replace with the actual collapsed image URL
      const expandedBg = "url('https://xwiki.com/en/download/Snippets/WebHome/chevron-up-solid.svg')"; // Replace with the actual expanded image URL

      // Toggle max-height and opacity for smooth animation
      if (
        faqContent.style.maxHeight === "0px" ||
        faqContent.style.maxHeight === ""
      ) {
        faqContent.style.maxHeight = faqContent.scrollHeight + "px";
        faqContent.style.opacity = "1";
        // Change the button background to the expanded state
        this.style.backgroundImage = expandedBg;
      } else {
        faqContent.style.maxHeight = "0px";
        faqContent.style.opacity = "0";
        // Change the button background to the collapsed state
        this.style.backgroundImage = collapsedBg;
      }
    });
  });
});