Accordion (details/summary)

The <details> and <summary> tags give you a fully working accordion natively — with keyboard accessibility and zero JavaScript.

Code

<details>
  <summary>What's included in the plan?</summary>
  <p>Unlimited formatting tools and free support.</p>
</details>
<details>
  <summary>Do I need to sign up?</summary>
  <p>No, all tools are available without an account.</p>
</details>

Preview

Explanation

summary is the always-visible heading; the details content expands/collapses on click. The browser adds the disclosure triangle and manages the open/closed state itself.

The open attribute on details expands it immediately on page load.
Multiple details elements sharing the same name attribute (in modern browsers) behave as a group — only one stays open at a time.

Related tools

Simple modal (no JS)

A modal dialog that opens and closes with pure CSS via the :target pseudo-class.

Visually hidden accessible text

A CSS class for text that screen readers announce but sighted users don't see.