Navigation / Details on demand
Disclosure
Keep secondary details available, with a clear indication of what is inside.
Basic usage
Why analysis stopped 2 reasons
- The statement depends on runtime input.
- An external library definition is unavailable.
HTML
<details class="disclosure">
<summary>Why analysis stopped <span class="count">2 reasons</span></summary>
<div class="disclosure-body"><ul><li>The statement depends on runtime input.</li><li>An external library definition is unavailable.</li></ul></div>
</details>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.disclosure | The native details element. |
.disclosure-body | Spacing for the expanded content. |
.disclosure-boxed | A boxed variant for a self-contained item. |
.disclosure-group | A group of disclosures with aligned edges. |
Usage notes
Describe the contents in summary. Do not hide the essential conclusion inside a disclosure. It works without JavaScript.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.