Accordion

Sample html for Accordion on Product Display Page

async function resizeBlock(container = ".product-info-block") {
  try {
    await Superfans.actions.resizeBlock(container);
  } catch (err) {
    console.error("resizeBlock failed:", err);
  }
}

const headers = document.querySelectorAll(".accordion-header");
headers.forEach((header) => {
  header.addEventListener("click", () => {
    const item = header.parentElement;
    const isOpen = item.classList.contains("active");
    document.querySelectorAll(".accordion-item").forEach((el) => {
      el.classList.remove("active");
      const content = el.querySelector(".accordion-content");
      if (content) content.style.display = "none";
    });
    if (!isOpen) {
      item.classList.add("active");
      const content = item.querySelector(".accordion-content");
      if (content) content.style.display = "block";
    }
    resizeBlock();
  });
});

Did this page help you?