Add accordion animation with js

This commit is contained in:
Antoine Bartuccio 2025-06-03 20:48:35 +02:00
parent fb3fd9536e
commit 0980fccf93
Signed by: klmp200
GPG Key ID: E7245548C53F904B
3 changed files with 28 additions and 27 deletions

View File

@ -0,0 +1,25 @@
const setMaxHeight = (element: HTMLDetailsElement) => {
element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
};
// Initialize max-height at load
window.addEventListener("DOMContentLoaded", () => {
for (const el of document.querySelectorAll("details.accordion")) {
setMaxHeight(el as HTMLDetailsElement);
}
});
// Accordion opened
new MutationObserver((mutations: MutationRecord[]) => {
for (const mutation of mutations) {
const target = mutation.target as HTMLDetailsElement;
if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
continue;
}
setMaxHeight(target);
}
}).observe(document.body, {
attributes: true,
attributeFilter: ["open"],
subtree: true,
});

View File

@ -50,31 +50,6 @@ details.accordion>.accordion-content {
border-bottom-left-radius: 3px;
}
@keyframes open {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
/* closing animation */
@keyframes close {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
details[open].accordion>summary~* {
animation: open 700ms;
}
details::not([open]).accordion>summary~* {
animation: open 700ms;
details.accordion {
transition: max-height 300ms ease-in-out;
}

View File

@ -27,6 +27,7 @@
<script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
<script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
<script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
<script type="module" src="{{ static('bundled/core/accordion-index.ts') }}"></script>
<!-- Jquery declared here to be accessible in every django widgets -->
<script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>