Add accordion animation with js

core/static/bundled/core/accordion-index.ts

@@ -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,
+});

core/static/core/accordion.scss

@@ -50,31 +50,6 @@ details.accordion>.accordion-content {
   border-bottom-left-radius: 3px;
 }
 
-@keyframes open {
+details.accordion {
-  0% {
+  transition: max-height 300ms ease-in-out;
-    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;
 }

core/templates/core/base.jinja

@@ -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>