# Collapse · MIAN

A single show/hide section. Native <details>, no JavaScript.

- Id: `collapse` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/collapse
- Use for: show more, expandable section, read more.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-collapse`: On a <details>.
- `mn-collapse-content`: Body.
- `mn-collapse-plain`: No border.

## Accessibility

- Native disclosure semantics and keyboard support.

## Examples

### Basic

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

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/collapse/source