Accordion

Native details/summary. Height animates through ::details-content and interpolate-size, no JS.

.accordionCSS only

Examples

What is φ doing here?

Every spacing, type, radius, blur and motion step is a power of the golden ratio.

Why no outlines?

Surfaces separate by tone and shadow. A stroke is only drawn between list items.

Can I round the corners?

Set data-radius="soft" or any --ae-radius-m.

`details.accordion`	One collapsible section. Consecutive accordions are divided by a hairline.
`> summary`	The always-visible header and toggle. The native marker is hidden; a chevron at the end turns when open.
`> (content)`	Everything after the summary: the panel, in muted text. Its height animates open and closed.

Attribute	Values	Description
`open`	boolean	Native. Expands the section; the browser toggles it when the summary is activated.
`name`	`<text>`	Native. Accordions sharing a `name` form an exclusive group: opening one closes the others.

<summary> is exposed as a button with its expanded state, so no ARIA is needed.
Keep the summary to text. Links or buttons inside it are hard to reach and conflict with the toggle.
Browsers without ::details-content open and close at once; the content is unchanged.

Key	Effect
`Enter` / `Space`	On the summary: opens or closes the section.