Accordion

Collapsible sections with smooth grid animation and full keyboard navigation (Arrow keys, Home, End).

Basic

Preview Code

<ac-accordion>
<div data-accordion-item>
  <button data-accordion-trigger>What is acopl.ar?</button>
  <div data-accordion-panel><div>Acopl.ar is a logistics platform for the agricultural sector.</div></div>
</div>
<div data-accordion-item>
  <button data-accordion-trigger>How does billing work?</button>
  <div data-accordion-panel><div>You are billed monthly based on usage.</div></div>
</div>
<div data-accordion-item>
  <button data-accordion-trigger>Can I cancel anytime?</button>
  <div data-accordion-panel><div>Yes, you can cancel your subscription at any time from settings.</div></div>
</div>
</ac-accordion>

Copy

Multiple open

Preview Code

<ac-accordion multiple>
<div data-accordion-item open>
  <button data-accordion-trigger>Section A</button>
  <div data-accordion-panel><div>Content A — open by default.</div></div>
</div>
<div data-accordion-item open>
  <button data-accordion-trigger>Section B</button>
  <div data-accordion-panel><div>Content B — also open.</div></div>
</div>
</ac-accordion>

Copy

Attributes

Attribute	Description
multiple	Allow multiple items open simultaneously
open on item	Pre-opens that item on load