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();
});
});Updated about 1 month ago
What’s Next
Did this page help you?