Accordion

Wrap native <details> items in an .accordion to stack them as joined tiles. Each item's <summary> is its header, and everything after the summary is its panel.

Add open to an item to show it expanded on load. The browser handles the rest without JavaScript. The summary acts as a button that reports whether its item is open, and Enter or Space toggles it. Opening animates in engines that can transition to auto height. Elsewhere, and under reduced motion, the item opens at once.

<div class="accordion">
  <details open>
    <summary>Can I change my plan later?</summary>
    <p>Yes. The new plan starts with your next billing period.</p>
  </details>
  <details>
    <summary>How do I export my data?</summary>
    <p>Open Settings, then Export. The download includes every project you own.</p>
  </details>
</div>

One open at a time

Give the items one shared name and the browser keeps at most one of them open. Opening an item closes the one that was open.

<div class="accordion">
  <details name="shipping" open>
    <summary>Standard delivery</summary>
    <p>Three to five working days. Free on orders over $50.</p>
  </details>
  <details name="shipping">
    <summary>Express delivery</summary>
    <p>Next working day when you order before 2 PM.</p>
  </details>
</div>

Leading icon

Put a leading icon first in the summary. Hide it from assistive technology, since the summary text already names the item.

<div class="accordion">
  <details>
    <summary>
      <span class="material-symbols" aria-hidden="true">lock</span>
      Privacy
    </summary>
    <p>Choose who can see your profile and activity.</p>
  </details>
</div>

Accessibility

Leave the summary's role and expanded state to the browser. A role or aria-expanded that you add overrides them and goes stale the first time the item toggles.

Keep links and buttons out of the summary. The summary is already a button, so a control inside it is nested in another control. Pressing that control also toggles the item. Put actions in the panel.

Tokens

Override these on the .accordion.