Expandable
Single-item disclosure for inline "show more" patterns. No component import — just native HTML <details>/<summary>, which MDX renders verbatim.
An expandable is a single hide/show toggle inline with prose — think “click to see the full error message” or “show example”. In Publier you get this with native HTML <details> and <summary> — no import, no hydration, no JavaScript.
Use Accordion when you have a list of items to disclose. Use <details> when you have one.
Basic
Click to expand
Hidden content shows up here when the reader clicks the summary. Any MDX works inside — paragraphs, lists, code blocks, callouts.
<details> <summary>Click to expand</summary>
Hidden content shows up here when the reader clicks the summary.</details>Open by default
Add the open attribute to render expanded on first load:
This starts open
Useful for the first-time-reader shortcut — the content is there, but the control to hide it is visible too.
<details open> <summary>This starts open</summary>
Useful for the first-time-reader shortcut…</details>Rich body content
The body accepts any MDX. Code blocks, callouts, nested components:
Sample error and fix
You might see:
Error: Cannot find module 'remark-math'<details> <summary>Sample error and fix</summary>
You might see:
``` Error: Cannot find module 'remark-math' ```
:::tip `remark-math` ships as a direct dep of Publier… :::</details>When to use Expandable vs Accordion
| Situation | Use |
|---|---|
| A single “show me more” toggle | <details> (this page) |
| A list of 3+ disclosable items | Accordion |
| Step-by-step walkthrough | Steps |
Behaviour
- Pure HTML —
<details>is a browser-native element. - No JavaScript cost, no island hydration, no layout shift.
- Keyboard-accessible by default (Enter/Space toggles the summary).
- Supported in every modern browser and screen reader.
- Respects
prefers-reduced-motion(no transition to respect, since it’s instant).