NoLoJS logo

Accordion - Initially Open

By adding an open attribute to the details element, you can to set it to be initially open. Clicking the summary still toggles the open and close state as normal.

Demo

Initially open, click to close

This content is initially visible, but can be hidden by clicking the summary.
Click again to re-open it.

HTML

<!-- Add an `open` attribute to the details elements to set it to be initially open. -->
<details open>
  <summary>Initially open, click to close</summary>
  <p>This content is initially visible, but can be hidden by clicking the summary.<br>Click again to re-open 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.