Accordion
Stacked disclosure sections. Native <details>; give them the same name for exclusive open.
FAQ (exclusive)
Is MIAN free to use?
Yes, for general and personal use. For commercial use, contact BTN GROUP SRL through the contact page.
Do I need React?
No. MIAN is HTML, CSS and one small script. It works in React, Vue, Laravel, WordPress or plain HTML.
Can I make my own noodle?
Yes: a noodle is a set of CSS custom properties. Copy one and change the values.
<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>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/accordion.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-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.