using native html

superpage/src/components/Accordion/Body.astro

@@ -1,7 +1,5 @@
-<div
+<main
-    x-show="open"
     class="text-sm/6 text-white/70 space-y-2.5 px-5 pb-3 [&_ul]:list-disc [&_ul]:list-inside"
-    style="display: none;"
 >
     <slot />
-</div>
+</main>

superpage/src/components/Accordion/Header.astro

@@ -2,14 +2,12 @@
 import { Icon } from "astro-icon/components";
 ---
 
-<div
+<summary
     class="cursor-pointer flex items-center justify-between px-5 gap-3 py-3"
-    x-on:click="open = ! open"
 >
     <slot />
     <Icon
         name="chevron-down"
-        class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0 transition duration-300"
+        class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0 transition duration-300 group-open:-rotate-180"
-        :class="{'-rotate-180': open === true}"
     />
-</div>
+</summary>

superpage/src/components/Accordion/Item.astro

@@ -1,7 +1,5 @@
-<div
+<details
-    x-data="{ open: false }"
+    class="bg-white/10 w-full hover:bg-white/15 aria-expanded:bg-white/15 rounded-lg transition group"
-    class="bg-white/10 w-full hover:bg-white/15 aria-expanded:bg-white/15 rounded-lg transition"
-    x-bind:aria-expanded="open"
 >
     <slot />
-</div>
+</details>

superpage/src/pages/[slug].astro

@@ -169,6 +169,6 @@ const { Content } = await render(course);
         </Container>
         {/* Course End */}
 
-        <Content test=": tes" />
+        <Content />
     </section>
 </Layout>