Accordion

An expandable list built with the incredibly powerful, JS-free native <details> and <summary> tags using the @utility accordion.

Is this accessible by default?

Yes! Because it uses native HTML details/summary, it is fully accessible to screen readers and keyboard navigation out of the box.

Can I style the marker?

Yes, you can use the ::marker pseudo-element or simply hide it and use a custom span (like the arrow here).

Usage

accordion.html

<details class="accordion group">
  <summary class="accordion-trigger">
    Is this accessible by default?
    <span class="accordion-icon"><ChevronDown size={18} /></span>
  </summary>
  <div class="accordion-content">
    Yes! Because it uses native HTML details/summary, it is fully accessible out of the box.
  </div>
</details>