const triggerClass = ".faq_item-title-wrap";
const itemClass = ".faq_item";
const contentClass = ".faq_item-text-wrap";
const activeClass = "is-open";

const items = document.querySelectorAll(itemClass);

const closeItem = (item) => {
  const content = item.querySelector(contentClass);
  if (content) {
    item.classList.remove(activeClass);
    content.style.height = "0px";
  }
};

const openItem = (item) => {
  const content = item.querySelector(contentClass);
  if (content) {
    item.classList.add(activeClass);
    content.style.height = content.scrollHeight + "px";
  }
};

items.forEach((item) => {
  const trigger = item.querySelector(triggerClass);

  trigger.addEventListener("click", (e) => {
    e.stopPropagation();
    const isOpen = item.classList.contains(activeClass);

    items.forEach((otherItem) => {
      if (otherItem !== item) closeItem(otherItem);
    });

    isOpen ? closeItem(item) : openItem(item);
  });
});

document.addEventListener("click", () => {
  items.forEach((item) => closeItem(item));
});

const contents = document.querySelectorAll(contentClass);
contents.forEach((content) => {
  content.addEventListener("click", (e) => e.stopPropagation());
});