Accordions

Overview

Accordions are great way to compact content blocs and display required ones by clicking on it.

Solo Accordion

Enables accordion feature individually

Click here to toggle content below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum, auctor nisi vitae, elementum tortor.

Click here to toggle content below

Copied !

---
import SoloAccordionTrigger from "$components/accordion/solo/SoloAccordionTrigger.astro";
import SoloAccordionContent from "$components/accordion/solo/SoloAccordionContent.astro";
import SoloAccordion from "$components/accordion/solo/SoloAccordion.astro";
---

<SoloAccordion class="bg-white border rounded">
  <SoloAccordionTrigger class="p-4">
    <h2>Click here to toggle content below</h2>
  </SoloAccordionTrigger>
  <SoloAccordionContent class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
    finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
    lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
    lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum, auctor
    nisi vitae, elementum tortor.
  </SoloAccordionContent>
</SoloAccordion>
<SoloAccordion class="bg-black text-white border rounded">
  <SoloAccordionTrigger class="p-4">
    <h2>Click here to toggle content below</h2>
  </SoloAccordionTrigger>
  <SoloAccordionContent class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
    finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
    lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
    lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum, auctor
    nisi vitae, elementum tortor.
  </SoloAccordionContent>
</SoloAccordion>
<SoloAccordion class="bg-slate-300 border rounded">
  <SoloAccordionTrigger class="p-4">
    <h2>Click here to toggle content below</h2>
  </SoloAccordionTrigger>
  <SoloAccordionContent class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
    finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
    lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
    lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum, auctor
    nisi vitae, elementum tortor.
  </SoloAccordionContent>
</SoloAccordion>

Group Accordion

Groups accordions and display only one (closing previous opened one).

Click here and close all others.

Copied !

---
import GroupAccordionList from "$components/accordion/group/GroupAccordionList.astro";
import GroupAccordionItem from "$components/accordion/group/GroupAccordionItem.astro";
import GroupAccordionTrigger from "$components/accordion/group/GroupAccordionTrigger.astro";
import GroupAccordionContent from "$components/accordion/group/GroupAccordionContent.astro";
---

<GroupAccordionList class="gap-y-4">
  <GroupAccordionItem class="bg-white border rounded">
    <GroupAccordionTrigger class="p-4" :class="{ 'border-b': isActive(id) }">
      <h2>Click here and close all others.</h2>
    </GroupAccordionTrigger>
    <GroupAccordionContent class="p-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
      finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
      lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
      lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum,
      auctor nisi vitae, elementum tortor.
    </GroupAccordionContent>
  </GroupAccordionItem>
  <GroupAccordionItem class="bg-black text-white border rounded">
    <GroupAccordionTrigger class="p-4">
      <h2>Click here and close all others.</h2>
    </GroupAccordionTrigger>
    <GroupAccordionContent class="p-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
      finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
      lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
      lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum,
      auctor nisi vitae, elementum tortor.
    </GroupAccordionContent>
  </GroupAccordionItem>
  <GroupAccordionItem class="bg-slate-300 border rounded">
    <GroupAccordionTrigger class="p-4">
      <h2>Click here and close all others.</h2>
    </GroupAccordionTrigger>
    <GroupAccordionContent class="p-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus
      finibus magna et dictum. Aenean volutpat et nisi id interdum. Integer nec
      lectus gravida, aliquet odio a, elementum turpis. Sed efficitur ligula
      lacus, ut laoreet lorem vulputate eget. Vivamus eget nulla elementum,
      auctor nisi vitae, elementum tortor.
    </GroupAccordionContent>
  </GroupAccordionItem>
</GroupAccordionList>