---
updatedAt: 2026-09-18T08:44:00.000Z
agentTools:
  projectIndex: https://dev.superfans.io/llms.txt
---

# Accordion 

Sample html for Accordion on Product Display Page

<Image align="center" className="border" border={true} width="200px" src="https://files.readme.io/f8097bcbba09b3d49d8875f53fc8ed0f333bc34b580c027d9013969c8709cde4-Screenshot_2025-07-08_at_3.41.58_PM.jpeg" />

```javascript
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();
  });
});
```