Accordion - Force Open

Using only CSS, you can force all details panels open, no JS required.
This is useful for things like print CSS or “Expand all” checkboxes.
Note that using this method may incur Accessibility issues.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Initially closed, click to open

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

Initially closed, click to open

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

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>

<hr>

<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>

<hr>

<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

details::details-content {
  content-visibility: visible !important;
  block-size: auto !important;
}

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.