From 4774a7b741d65dcf8292939bb16953898c74d718 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 5 Jun 2025 20:37:58 +0200
Subject: [PATCH] Improve accordion animation

---
 core/static/bundled/core/accordion-index.ts | 16 ++++++++++++----
 core/static/core/accordion.scss             | 11 ++++++++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/core/static/bundled/core/accordion-index.ts b/core/static/bundled/core/accordion-index.ts
index 39e37564..d2007767 100644
--- a/core/static/bundled/core/accordion-index.ts
+++ b/core/static/bundled/core/accordion-index.ts
@@ -1,11 +1,19 @@
-const setMaxHeight = (element: HTMLDetailsElement) => {
-  element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
+const updateMaxHeight = (element: HTMLDetailsElement) => {
+  const content = element.querySelector(".accordion-content") as HTMLElement | null;
+  if (!content) {
+    return;
+  }
+  if (element.hasAttribute("open")) {
+    content.style.maxHeight = `${content.scrollHeight}px`;
+  } else {
+    content.style.maxHeight = "0px";
+  }
 };
 
 // Initialize max-height at load
 window.addEventListener("DOMContentLoaded", () => {
   for (const el of document.querySelectorAll("details.accordion")) {
-    setMaxHeight(el as HTMLDetailsElement);
+    updateMaxHeight(el as HTMLDetailsElement);
   }
 });
 
@@ -16,7 +24,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
     if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
       continue;
     }
-    setMaxHeight(target);
+    updateMaxHeight(target);
   }
 }).observe(document.body, {
   attributes: true,
diff --git a/core/static/core/accordion.scss b/core/static/core/accordion.scss
index abdbba02..17443e5e 100644
--- a/core/static/core/accordion.scss
+++ b/core/static/core/accordion.scss
@@ -44,12 +44,17 @@ details.accordion>.accordion-content {
   background: #ffffff;
   color: #333333;
   padding: 1em 2.2em;
-  overflow: auto;
   border: 1px solid #dddddd;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
+  opacity: 0;
+  overflow: hidden;
 }
 
-details.accordion {
-  transition: max-height 300ms ease-in-out;
+details[open].accordion>.accordion-content {
+  opacity: 1;
+  // Setting a transition on all states of the content
+  // will create a strange behavior where the transition
+  // continues without being shown, creating inconsistenties
+  transition: all 300ms ease-out;
 }
\ No newline at end of file