Components / UI & forms
Accordion
Native disclosures with reversible height motion and animated plus/minus strokes.
Basic structure
div.accordion > details > summary + div.accordion-bodyHow does this open?
Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.
With reduced motion or no JavaScript, the answer is still available.
Can more than one stay open?
Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.
With reduced motion or no JavaScript, the answer is still available.
What happens without JavaScript?
Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.
With reduced motion or no JavaScript, the answer is still available.
HTML
<div class="accordion"><details><summary>How does this open?</summary><div class="accordion-body content"><p>Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.</p><p>With reduced motion or no JavaScript, the answer is still available.</p></div></details><details><summary>Can more than one stay open?</summary><div class="accordion-body content"><p>Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.</p><p>With reduced motion or no JavaScript, the answer is still available.</p></div></details><details><summary>What happens without JavaScript?</summary><div class="accordion-body content"><p>Native disclosure with reversible height motion. Paragraphs use the same spacing as the rest of the framework.</p><p>With reduced motion or no JavaScript, the answer is still available.</p></div></details></div>Options
| Class or attribute | What it does |
|---|---|
open | Native initial expanded state. |
--accordion-title-size | Disclosure title size defaults to H4 (24px), independently of the answer text. |
multiple open items | Default behavior; opening one does not close another. |
reduced motion / no js | Immediate native disclosure. |
within is-dark | Dividers use a quieter version of the dark border color. |