Collapsible @astryx-svelte/core v0.3.0 · Collapsible
Usage
Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into sections they care about. Wrap multiple collapsibles in CollapsibleGroup for accordion behavior. For custom collapsible components, use theuseCollapsible hook directly (astryx hook useCollapsible). ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use hasDividers on CollapsibleGroup for FAQ-style lists: built-in row hairlines with themed border tokens, no hand-rolled borders. |
| Do | Wrap each Collapsible in an Card for visual separation in accordion layouts, or use CollapsibleGroup's hasDividers for flat lists; don't combine both. |
| Do | Use CollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time. |
| Do | Use type="multiple" when users need to compare content across sections, like feature lists or pricing tiers. |
| Do | Start sections open (defaultIsOpen) when the content is likely needed on first view; don't make users click to see essential info. |
| Don't | Hide critical or required content behind a collapsible; users may not discover it. |
| Don't | Nest collapsibles more than two levels deep; it makes content hard to find and navigate. |
| Don't | Use a collapsible for a single short paragraph; just show the text directly instead. |
Examples
Common configurations, variations, and states.Collapsible — Controlled
Manage the open section from parent state. Use when the open state needs to sync with a URL param, form, or external control.
Collapsible — Divided Accordion
FAQ-style accordion using the hasDividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.
Collapsible — Multiple Mode
Several sections open at once. Use when users need to compare content across sections, like feature lists or pricing tiers.
Collapsible — Single Mode
Only one section open at a time. Use for settings pages or any list where expanding one item should close the others.
Collapsible — With Dividers
Collapsible sections separated by dividers instead of cards. Use for inline disclosure in detail panels or sidebar content where cards would add too much weight.