From 48a541fffe96bee29de4b6e1b55a049a50fe2314 Mon Sep 17 00:00:00 2001
From: ferrreo <harderthanfire@gmail.com>
Date: Wed, 28 Jun 2023 19:14:59 +0100
Subject: [PATCH] Fix features open and close + rework animation to be more pog

---
 src/components/widgets/AccordionWidget.astro | 42 +++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/widgets/AccordionWidget.astro b/src/components/widgets/AccordionWidget.astro
index 35fe013..d8f1b0b 100644
--- a/src/components/widgets/AccordionWidget.astro
+++ b/src/components/widgets/AccordionWidget.astro
@@ -7,17 +7,19 @@ const { title, description } = Astro.props;
 ---
 
 <div
-  class="w-full rounded-lg border px-2 py-2 transition-[height] duration-500 ease-in-out dark:bg-slate-800"
+  class="w-full rounded-lg border overflow-hidden closed transition-height duration-200 relative px-2 py-2 dark:bg-slate-800"
 >
   <button
     class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center"
   >
     <h3
-      class="opacity-80 w-full transition-opacity duration-500 ease-in-out font-medium pointer-events-none"
+      class="hed w-full font-bold pointer-events-none"
     >
       {title}
     </h3>
-    <div class="pointer-events-none transition-transform duration-500 shrink-0 h-4 w-4">
+    <div
+      class="chev pointer-events-none transition-transform duration-200 shrink-0 h-4 w-4"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="shrink md:h-4 fill-slate-800 dark:fill-white transition-transform duration-500 ease-in-out pointer-events-none"
@@ -25,26 +27,36 @@ const { title, description } = Astro.props;
       >
         <path
           d="M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
-        ></path></svg>
+        ></path></svg
+      >
     </div>
   </button>
   <p
-    style="max-height: 0px;"
-    class="overflow-hidden transition-all duration-500 text-center md:text-start ease-in-out pointer-events-none"
+    style="top: 50px"
+    class="text-center md:text-start absolute pointer-events-none"
   >
     {description}
   </p>
 </div>
 
 <script>
-  for (let e of document.getElementsByClassName("accordion")) {
-    e.addEventListener("click", function (e) {
-      (e.target as HTMLElement).children[0].classList.toggle("opacity-80");
-      (e.target as HTMLElement).children[0].classList.toggle("font-bold");
-      (e.target as HTMLElement).children[1].classList.toggle("rotate-180");
-      if (this.nextElementSibling.style.maxHeight === "0px")
-        this.nextElementSibling.style.maxHeight = "500px";
-      else this.nextElementSibling.style.maxHeight = "0px";
+  const accords = document.querySelectorAll(".accordion");
+
+  accords.forEach((accord) => {
+    accord.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      const parent = target.parentNode as HTMLElement;
+      const next = target.nextElementSibling as HTMLElement;
+      const nextHeight = next.getBoundingClientRect().height;
+      parent.style.height = parent.style.height ? "" : 58 + nextHeight + "px";
+      parent.classList.toggle("closed");
+      target.querySelector(".chev")?.classList.toggle("rotate-180");
     });
-  }
+  });
 </script>
+
+<style>
+  .closed {
+    height: 58px;
+  }
+</style>