60 lines
1.9 KiB
Text
60 lines
1.9 KiB
Text
---
|
|
import "@styles/components/accordion.css";
|
|
---
|
|
<details class=`accordion ${Astro.props.class ?? ""}` {...Astro.props}>
|
|
<summary>
|
|
<slot name="header"/>
|
|
</summary>
|
|
<div class="accordion-container">
|
|
<div>
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".accordion").forEach(element => {
|
|
const accordion = element as HTMLDetailsElement;
|
|
const summary = accordion.querySelector("summary")!;
|
|
const body = accordion.querySelector(".accordion-container") as HTMLDivElement;
|
|
|
|
summary.addEventListener("click", event => {
|
|
if ((event.target as Element).tagName === "A") return;
|
|
event.preventDefault();
|
|
|
|
if (!accordion.open || accordion.classList.contains("closing")) {
|
|
accordion.classList.toggle("closing", false);
|
|
body.style.setProperty("--height", "0px");
|
|
body.classList.toggle("animate", true);
|
|
|
|
requestAnimationFrame(() => {
|
|
accordion.open = true;
|
|
body.style.setProperty("--height", body.scrollHeight + "px");
|
|
});
|
|
} else {
|
|
body.style.setProperty("--height", body.scrollHeight + "px");
|
|
|
|
requestAnimationFrame(() => {
|
|
body.classList.toggle("animate", true);
|
|
|
|
requestAnimationFrame(() => {
|
|
accordion.classList.toggle("closing", true);
|
|
body.style.setProperty("--height", "0px");
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
body.addEventListener("transitionend", event => {
|
|
if ((event as TransitionEvent).propertyName == "max-height") {
|
|
body.classList.toggle("animate", false);
|
|
|
|
if (accordion.classList.contains("closing")) {
|
|
accordion.classList.toggle("closing", false);
|
|
accordion.open = false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|