NoLoJS logo

Accordion - Basic

With no CSS or JS required, you can create a Native HTML accordion, including open and close actions.

Demo

Initially closed, click to open

This content is initially hidden, but is revealed by clicking the summary.
Click again to re-close it.

HTML

<details>
  <summary>Initially closed, click to open</summary>
  <p>This content is initially hidden, but is revealed by clicking the summary.<br>Click again to re-close it.</p>
</details>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`details`](https://webstatus.dev/features/details)

CodePen

See the Pen on CodePen.