# Accordion · MIAN

Stacked disclosure sections. Native <details>; give them the same name for exclusive open.

- Id: `accordion` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/accordion
- Use for: collapsible sections, expand collapse, details list, product details accordion.
- Alternatives: faq, tabs.

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-accordion`: Container of <details>.
- `mn-accordion-content`: Panel content.
- `details name="…"`: Same name = only one open at a time. Native, no JS.

## Accessibility

- <details>/<summary> are keyboard and screen-reader operable natively, and the browser can find text inside closed panels.

## Examples

### FAQ (exclusive)

```html
<div class="mn-accordion" style="max-width:34rem">
  <details name="faq" open><summary>Is MIAN free to use?</summary><div class="mn-accordion-content">Yes, for general and personal use. For commercial use, contact BTN GROUP SRL through the contact page.</div></details>
  <details name="faq"><summary>Do I need React?</summary><div class="mn-accordion-content">No. MIAN is HTML, CSS and one small script. It works in React, Vue, Laravel, WordPress or plain HTML.</div></details>
  <details name="faq"><summary>Can I make my own noodle?</summary><div class="mn-accordion-content">Yes: a noodle is a set of CSS custom properties. Copy one and change the values.</div></details>
</div>
```

## Source

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