When content should be available on demand, details and summary provide a built-in disclosure control. The browser handles the open state, keyboard activation, and expanded semantics.

<details>
  <summary>What does this setting do?</summary>
  <p>It changes how the page displays the selected content.</p>
</details>

Keep the summary useful

  • Make the summary a concise description of the hidden content.
  • Place summary as the first child of details.
  • Do not put a link, button, or other interactive control inside the summary.

Use a group only when it fits

The name attribute can make a group of details behave like a set where opening one closes another. That is useful for single-open FAQ panels, but not when readers may reasonably want several sections open together.

Prefer the native element over a custom disclosure when its behavior matches the design. Add styling around the semantics rather than rebuilding the control with clickable generic containers.