Accordion

Grouped disclosure panels built on <details>.

A set of disclosure panels built from native <details>. Browsers handle the keyboard and open-state for free — no JavaScript needed.

Multiple open

Wrap several <details> together. Any number can be open at once.

What is this site built with?

Eleventy, a pinch of Lightning CSS, and no client-side JavaScript frameworks.

How are the styles organised?

Each component has its own CSS file in engine/styles/components/, and styles.css stitches them together with @import.

Why hard-offset shadows?

They suit the illustrated, flat aesthetic and avoid the soft-blur look common to most sites.

<details>
  <summary>Question</summary>
  <p>Answer.</p>
</details>
<details>
  <summary>Another question</summary>
  <p>Another answer.</p>
</details>

Exclusive

Give each <details> the same name attribute to make them mutually exclusive — opening one closes the others. Supported in all modern browsers.

Only one open at a time

Try opening the next one — this one will close.

Click me instead

And now the first panel has closed.

Or me

Only one panel can be open at a time.

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer.</p>
</details>
<details name="faq">
  <summary>Question 2</summary>
  <p>Answer.</p>
</details>

Accessibility

The <summary> is focusable and toggles on Enter or Space. Screen readers announce the expanded state automatically. See also Details & summary for the underlying styles.