Collapsible

Expand/collapse panel on native details/summary — zero JavaScript. Same primitive as Accordion, standalone.

INSTALL

1pnpm dlx @sayagodev/mo add collapsible

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/accordion.css";

Also copied as dependency: shared.css

EXAMPLES

Basic

Product details

This panel can be expanded or collapsed to reveal additional content.

1<article class="card">2  <details>3    <summary>Product details</summary>4    <div>5      <p>This panel can be expanded or collapsed to reveal additional content.</p>6      <button type="button" class="xs">Learn More</button>7    </div>8  </details>9</article>10

Demo

@peduarte starred 3 repositories

1<details>2  <summary>@peduarte starred 3 repositories</summary>3  <ul class="unstyled">4    <li><a href="#">@radix-ui/primitives</a></li>5    <li><a href="#">@radix-ui/colors</a></li>6    <li><a href="#">@stitches/react</a></li>7  </ul>8</details>9

File tree

components

lib

1<article class="card" data-size="sm" style="max-width:16rem; padding:0;">2  <div class="file-tree" data-file-tree>3    <details open>4      <summary><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> components</summary>5      <div>6        <details open>7          <summary><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> ui</summary>8          <div>9            <button type="button" class="link small" onclick="console.log('open button.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> button.tsx</button>10            <button type="button" class="link small" onclick="console.log('open card.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> card.tsx</button>11            <button type="button" class="link small" onclick="console.log('open dialog.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> dialog.tsx</button>12            <button type="button" class="link small" onclick="console.log('open input.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> input.tsx</button>13          </div>14        </details>15        <button type="button" class="link small" onclick="console.log('open login-form.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> login-form.tsx</button>16        <button type="button" class="link small" onclick="console.log('open register-form.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> register-form.tsx</button>17      </div>18    </details>19    <details>20      <summary><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> lib</summary>21      <div>22        <button type="button" class="link small" onclick="console.log('open utils.ts')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> utils.ts</button>23        <button type="button" class="link small" onclick="console.log('open cn.ts')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> cn.ts</button>24      </div>25    </details>26    <button type="button" class="link small" onclick="console.log('open app.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> app.tsx</button>27    <button type="button" class="link small" onclick="console.log('open layout.tsx')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> layout.tsx</button>28  </div>29</article>30

USAGE

1<details>2  <summary>Product details</summary>3  <p>Hidden content revealed while open.</p>4</details>5 6<!-- carded per-item look -->7<details class="boxed">8  <summary>Product details</summary>9  <p>Hidden content revealed while open.</p>10</details>

API

NAMEKINDDESCRIPTION

details / summaryelementNative disclosure pair; clicking summary toggles open without JS

[open]attributeItem starts expanded; toggled by the platform

.boxedclassOptional carded per-item look (border + radius + joined stacking)

[disabled]attributeDims the item and blocks the trigger

<mo-accordion>elementAdd when several items should behave as one group (single/multiple)

FILES

src/css/accordion.cssdep: src/css/shared.css

Install:mo add collapsible

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--accent--accent-foreground--background--border--card--destructive--foreground--muted--muted-foreground--radius--ring

Component hooks

--mo-accordion-padding

Preview

Module: sealer head

Temperature, pressure and seal time report to the workbench in real time.

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.