Skip to content
Relements Relements

Accordion

A group of <details> sharing a name. The browser keeps one panel open at a time, with no JavaScript.

FAQ

Section titled “FAQ”
What is Relements?
An HTML-first design system of tokens and styles.
Does the accordion need JavaScript?
No — exclusivity comes from the native name attribute.
What about older browsers?
They simply allow multiple panels open — still fully functional.
Live example
<div class="re-accordion">
  <details class="re-disclosure" name="faq" open>
    <summary class="re-disclosure__summary">What is Relements?</summary>
    <div class="re-disclosure__body">An HTML-first design system of tokens and styles.</div>
  </details>
  <details class="re-disclosure" name="faq">
    <summary class="re-disclosure__summary">Does the accordion need JavaScript?</summary>
    <div class="re-disclosure__body">
      No — exclusivity comes from the native <code>name</code> attribute.
    </div>
  </details>
  <details class="re-disclosure" name="faq">
    <summary class="re-disclosure__summary">What about older browsers?</summary>
    <div class="re-disclosure__body">
      They simply allow multiple panels open — still fully functional.
    </div>
  </details>
</div>

Accessibility

Section titled “Accessibility”
  • Keyboard — entirely native. Tab moves focus to each <summary>; Enter or Space toggles that panel open or closed. The shared name makes opening one panel close its sibling — the browser handles it, no JavaScript.
  • Focus — each <summary> shows a visible :focus-visible ring (--re-shadow-focus). The default disclosure marker is replaced by a decorative chevron, but the <summary> stays a real focusable, operable control.
  • Semantics — built on native <details>/<summary>, so assistive tech announces each summary as an expand/collapse control and reflects its open/closed state without any added role or aria-*. The chevron is a generated ::before pseudo-element, so it is never announced.
  • Notes — the only motion is the chevron rotation; the global reset zeroes it out under prefers-reduced-motion: reduce. Because exclusivity relies on <details name>, older browsers without that feature simply allow multiple panels open — still fully operable. See the disclosure component for a single standalone panel, and the accessibility guide.