54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
(() => {
|
|
function initFaqItem(item) {
|
|
const summary = item.querySelector("summary");
|
|
const answer = item.querySelector(".faq-answer");
|
|
if (!summary || !answer) {
|
|
return;
|
|
}
|
|
|
|
let isAnimating = false;
|
|
|
|
summary.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
if (isAnimating) {
|
|
return;
|
|
}
|
|
|
|
if (!item.open) {
|
|
item.open = true;
|
|
item.classList.remove("is-closing");
|
|
item.classList.add("is-opening");
|
|
const finishOpen = () => {
|
|
item.classList.remove("is-opening");
|
|
isAnimating = false;
|
|
};
|
|
isAnimating = true;
|
|
answer.addEventListener("animationend", finishOpen, { once: true });
|
|
window.setTimeout(
|
|
finishOpen,
|
|
window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 360,
|
|
);
|
|
return;
|
|
}
|
|
|
|
isAnimating = true;
|
|
item.classList.remove("is-opening");
|
|
item.classList.add("is-closing");
|
|
const finishClose = () => {
|
|
item.classList.remove("is-closing");
|
|
item.open = false;
|
|
isAnimating = false;
|
|
};
|
|
answer.addEventListener("animationend", finishClose, { once: true });
|
|
window.setTimeout(
|
|
finishClose,
|
|
window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 360,
|
|
);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".faq-item").forEach(initFaqItem);
|
|
});
|
|
})();
|