Make accordion styling as a component

src/components/accordion/accordion.astro

@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  id: string;
+}
+
+const { title, id } = Astro.props;
+---
+
+<details class="group mb-4">
+  <summary
+    aria-expanded="false"
+    aria-controls={id}
+    class="cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+  >
+    <span class="font-semibold">{title}</span>
+    <span aria-hidden="true" class="group-open:hidden">+</span>
+    <span aria-hidden="true" class="group-open:block hidden">−</span>
+  </summary>
+
+  <div id={id} class="pl-4">
+    <slot />
+  </div>
+</details>

src/content/pages/test.mdx

@@ -270,3 +270,22 @@ Barking up the right tree
 
 ## YouTube
 <YouTube id="j5a0jTc9S10" alt="Mood lifter" />
+
+## Accordion
+#### What do the dogs say?
+
+<Accordion title="Spanish-speaking dogs" id="spanish">
+  **Guau guau!**
+</Accordion>
+
+<Accordion title="Italian-speaking dogs" id="italian">
+  *Bau bau!*
+</Accordion>
+
+<Accordion title="Japanese-speaking dogs" id="japanese">
+  ワンワン
+</Accordion>
+
+<Accordion title="Finnish-speaking dogs" id="finnish">
+  ***Hau hau!***
+</Accordion>

src/pages/[...slug].astro

@@ -12,6 +12,7 @@ import BenefitsList from "../components/benefits-list/benefits-list.astro";
 import BenefitItem from "../components/benefits-list/benefit-item.astro";
 import { Note } from "../components/note";
 import { SponsorTiers } from "../components/sponsor-tiers";
+import Accordion from "../components/accordion/accordion.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("pages");
@@ -44,6 +45,7 @@ const description = post.data.subtitle;
         Note,
         SponsorTiers,
         hr: Separator,
+        Accordion
       }}
     />
   </Prose>