Accordion
CSS-only, built on <details>/<summary>. No JavaScript required. Chevron rotates when open.
Default
How do I get started?
Add a
<link> to index.css and use the component classes.Does it require JavaScript?
No. Just plain HTML + CSS.
What are the variants?
--borderless, --flush.<div class="accordion">
<details class="accordion__item" open>
<summary class="accordion__header">Question</summary>
<div class="accordion__content">Answer…</div>
</details>
</div>Flush (full-width, no outer frame)
Item one
Content.
Item two
Content.
<div class="accordion accordion--flush">…</div>Borderless (no container border)
Hello
No frame around the whole thing.
<div class="accordion accordion--borderless">…</div>Modifiers
| Class | Effect |
|---|---|
.accordion | Base container. Rounded border, soft bg. |
.accordion--borderless | Remove outer border. |
.accordion--flush | Remove outer border AND side padding; items span full width. |
.accordion--animated | Animate height on open/close. Requires interpolate-size: allow-keywords (Chrome 129+). |
.accordion__item | Single <details> row. |
.accordion__header | Trigger summary with chevron. |
.accordion__content | Expanded content area. |