Accordion

An accordion is a vertical list of headers that reveal or hide content sections when clicked.

Demo

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it unstyled?

Yes. It's unstyled by default, giving you freedom over the look and feel.

Can it be animated?

Yes! You can animate the Accordion with CSS and x-transition.

accordion.html

<div x-init x-accordion>
  <div x-accordion:item>
    <button x-accordion:trigger>Is it accessible?</button>
    <div x-accordion:content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </div>
  </div>
  <div x-accordion:item>
    <button x-accordion:trigger>Is it unstyled?</button>
    <div x-accordion:content>
      Yes. It's unstyled by default, giving you freedom over the look and feel.
    </div>
  </div>
  <div x-accordion:item>
    <button x-accordion:trigger>Can it be animated?</button>
    <div x-accordion:content>
      Yes! You can animate the Accordion with CSS and x-transition.
    </div>
  </div>
</div>

Features

• Full keyboard navigation
• Supports vertical or horizontal orientation
• Can expand one or multiple items
• Can set default state per item
• Can animate the expansion of items

View Source (opens in new tab)

Anatomy

<div x-init x-accordion>
  <div x-accordion:item>
    <button x-accordion:trigger></button>
    <div x-accordion:content></div>
  </div>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-accordion

Required

---

The root element for the accordion.

Modifier	Description
.single | .multiple	Opens one or multiple items at a time. Defaults to .multiple.
.loop	Loops keyboard navigation (e.g. arrow keys)
.vertical | .horizontal	Orientation of the accordion for keyboard navigation. Defaults to .vertical.

x-accordion:item

Required

---

Each drawer item in the accordion.

Modifier	Description
.open	Open the item by default

Event	Description	detail
accordion:change	Whether the item is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-accordion:trigger

Required

---

Event	Description	detail
accordion:change	Whether the item is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-accordion:content

Required

---

The content that will be shown or hidden in the drawer item.

Event	Description	detail
accordion:change	Whether the item is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

Toolbelt uses Alpine’s x-show directive to show or hide the item. The item’s shown or hidden state can be animated using CSS and the x-transition directive. Here’s an example for how to animate an accordion item’s height with a CSS grid trick:

<div
  class="grid transition-all"
  x-accordion:content
  x-transition:enter-start="grid-rows-[0fr]"
  x-transition:enter-end="grid-rows-[1fr]"
  x-transition:leave-start="grid-rows-[1fr]"
  x-transition:leave-end="grid-rows-[0fr]"
>
  <div class="overflow-hidden">...</div>
</div>