Accordions used to be three hundred lines of JavaScript doing the work of two tags. Put the same name attribute on a group of <details> elements and the browser opens one and closes the others for you.

<details name="faq" open>
  <summary>What makes this an accordion?</summary>
  <p>The name attribute groups the panels; opening one closes the rest.</p>
</details>
<details name="faq">
  <summary>Works without JavaScript?</summary>
  <p>It never needed any.</p>
</details>

What the browser does for you

  • Keyboard: Tab reaches every summary, Enter or Space toggles, no focus trap code exists to get wrong.
  • JavaScript-off readers get the full experience, because there is nothing for a disabled script to break.
  • Search engines read the content either way: the panels are real DOM, not a hidden div waiting for hydration.

Upgrade an old accordion

  1. Replace the script with one <details> per panel, all sharing one name value.
  2. Move the old button's text into <summary>; keep the chevron icon in CSS.
  3. Delete the click handler and the ARIA state attributes; <summary> already is the toggle.
  4. Test keyboard only: every summary reachable, only one panel open per group.

Need animation? Decorate details[open] transitions in CSS and let the browser keep the state. The gacor outcome: less code and wider access instead of less access.