Accordion
Sourcecomponents/Accordion.astro
Expandable rows
A list of rows that expand to reveal their content — for FAQs and disclosure. Built on the native <details>, so it works without JavaScript and is keyboard-accessible.
A question that opens to reveal its answer
The answer sits in the panel below and appears when the row is expanded. Keep it to a short paragraph.
Another question in the set
Each row is a native <details>, so it works without JavaScript and is fully keyboard-accessible.
A third question
Set single to keep only one row open at a time — opening one closes the rest.
Single-open
With single, opening a row closes the others — one answer at a time.
A question that opens to reveal its answer
The answer sits in the panel below and appears when the row is expanded. Keep it to a short paragraph.
Another question in the set
Each row is a native <details>, so it works without JavaScript and is fully keyboard-accessible.
A third question
Set single to keep only one row open at a time — opening one closes the rest.
On light, dark & image
The surface prop adapts it: light hairlines on a page, light text & hairlines on a dark section, or a frosted panel over a photo.
On light
A question that opens to reveal its answer
The answer sits in the panel below and appears when the row is expanded. Keep it to a short paragraph.
Another question in the set
Each row is a native <details>, so it works without JavaScript and is fully keyboard-accessible.
A third question
Set single to keep only one row open at a time — opening one closes the rest.
On dark
A question that opens to reveal its answer
The answer sits in the panel below and appears when the row is expanded. Keep it to a short paragraph.
Another question in the set
Each row is a native <details>, so it works without JavaScript and is fully keyboard-accessible.
A third question
Set single to keep only one row open at a time — opening one closes the rest.
On image
A question that opens to reveal its answer
The answer sits in the panel below and appears when the row is expanded. Keep it to a short paragraph.
Another question in the set
Each row is a native <details>, so it works without JavaScript and is fully keyboard-accessible.
A third question
Set single to keep only one row open at a time — opening one closes the rest.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
items | { title, body, open? }[] | — | The rows. Or slot <details class="acc-item"> markup. |
single | boolean | false | Keep only one row open at a time. |
surface | 'light' | 'dark' | 'image' | 'light' | Light hairlines, or light text on dark; image gets a frosted panel. |
Usage
Pass items, or slot your own <details class="acc-item"> rows for full control.
<Accordion single items={[
{ title: 'Question one', body: 'Answer one.' },
{ title: 'Question two', body: 'Answer two.' },
]} />Rules
Use it for FAQs and secondary detail people can skip.
Write titles as the question or the thing being revealed.
Hide essential content behind it — key info should be visible.
Nest accordions inside accordions.