Accordion

How to use it

Use for a list of questions or sections where people look for one answer and skip the rest, such as an FAQ or a settings help panel. Keep each heading a short question or label, keep the answer right under it, and leave at most one section open on load. It needs no JavaScript: each item is a native details element, so it keeps working if scripts fail.

Accessibility

Each item is a native <details>/<summary> pair, so the summary is a real control: it is reached with Tab, toggled with Enter or Space, and announced with its expanded or collapsed state without any ARIA. The focus-visible outline is drawn inside the item so it is never clipped. Panel text (#334155 on white) and headings (#0f172a on white, or on #f1f5f9 while hovered) all exceed 4.5:1.

Source (copy-ready)

Copy code

<div class="dcl-accordion">
  <details class="dcl-accordion__item" open>
    <summary class="dcl-accordion__summary">What does the free plan include?</summary>
    <div class="dcl-accordion__panel"><p>Up to three projects, unlimited collaborators and community support.</p></div>
  </details>
  <details class="dcl-accordion__item">
    <summary class="dcl-accordion__summary">Can I change plans later?</summary>
    <div class="dcl-accordion__panel"><p>Yes. An upgrade applies at once; a downgrade applies at the end of the billing period.</p></div>
  </details>
  <details class="dcl-accordion__item">
    <summary class="dcl-accordion__summary">How do I cancel?</summary>
    <div class="dcl-accordion__panel"><p>Open Settings, choose Billing, then Cancel plan. Your data stays available for 30 days.</p></div>
  </details>
</div>
<style>
.dcl-accordion { max-width: 32rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-accordion__item + .dcl-accordion__item { border-top: 1px solid #cbd5e1; }
.dcl-accordion__summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-accordion__summary:hover { color: #0f172a; background-color: #f1f5f9; }
.dcl-accordion__summary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.dcl-accordion__panel { padding: 0 1rem 0.75rem; color: #334155; background-color: #ffffff; }
.dcl-accordion__panel p { margin: 0; }
</style>