Collapse
A single show/hide section. Native <details>, no JavaScript.
Basic
Advanced settings
<details class="mn-collapse" style="max-width:32rem">
<summary>Advanced settings</summary>
<div class="mn-collapse-content">
<label class="mn-check"><input class="mn-checkbox" type="checkbox"> Enable experimental features</label>
</div>
</details>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/collapse.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-collapse | On a <details>. |
| mn-collapse-content | Body. |
| mn-collapse-plain | No border. |
Accessibility
- Native disclosure semantics and keyboard support.