Collapsible New Alpha Light DOM & Tailwind
A single section of content that expands and collapses behind a trigger.
Usage
Collapsible progressively discloses a single section of content behind a trigger. Pair a Collapsible Trigger with a Collapsible Panel inside a Collapsible.
Import the parts you need — each import registers its custom element:
import "@nordhealth/components/lib/Collapsible"
import "@nordhealth/components/lib/CollapsibleTrigger"
import "@nordhealth/components/lib/CollapsiblePanel"
Then compose a trigger and a panel:
Composition
A collapsible pairs a trigger with the panel it shows and hides.
Collapsible
├── CollapsibleTrigger
└── CollapsiblePanel
<nord-collapsible>
<nord-collapsible-trigger>
<nord-button>Toggle</nord-button>
</nord-collapsible-trigger>
<nord-collapsible-panel>Panel content.</nord-collapsible-panel>
</nord-collapsible>
Collapsible
Collapsible is the container. It owns the expanded state via the open attribute and can be disabled.
Collapsible Trigger
Collapsible Trigger wraps the control that toggles the panel — typically a Button. Give it a clear label so its purpose is obvious even when the panel is collapsed.
Collapsible Panel
Collapsible Panel holds the content that is shown and hidden.
Controlled state
The open attribute reflects and controls whether the panel is expanded. Set it to open the panel by default, or toggle it from your own code to drive the collapsible.
Examples
Basic
A compact disclosure for secondary detail.
Settings panel
Reveal extra controls on demand. The fields use the Field family so each input is labelled.
File tree
Nest collapsibles to build a disclosure tree, such as a file or folder browser. Each folder is its own Collapsible, and its panel indents the items it contains.
RTL
Collapsible follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- The Collapsible Trigger wraps a real button and manages
aria-expandedand the relationship to its panel, so screen reader users know whether the section is open. - Give the trigger a clear, descriptive label so its purpose is obvious even when the panel is collapsed.
- Use a Collapsible for a single disclosure. To group several related sections that expand and collapse together, use an Accordion instead.
API reference
Collapsible
Collapsible is a disclosure that shows or hides a section of content. It wires together a Collapsible Trigger and a Collapsible Panel, animating the panel height as it opens and closes.
<nord-collapsible></nord-collapsible>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
open | open | Whether the collapsible is open. | boolean | false |
disabled | disabled | Whether the collapsible should ignore user interaction. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot for the Collapsible Trigger, Collapsible Panel and any other content. |
| Event | Detail Type | Description |
|---|---|---|
toggle | CollapsibleToggleEvent | Dispatched when the collapsible is opened or closed. The event includes an open property reflecting the new state. |
Parts
This component is made up of the following parts.
Collapsible Panel
Collapsible Panel holds the content revealed by its Collapsible Trigger. It must be placed inside a Collapsible and animates its height as it opens and closes.
<nord-collapsible-panel></nord-collapsible-panel>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
open | open | Whether the panel is open. Set by the parent Collapsible. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot for the collapsible content. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-collapsible-panel-height | Set during the open/close animation to the measured content height. Read it to coordinate custom animations. | — |
Collapsible Trigger
Collapsible Trigger is the interactive control that opens and closes its Collapsible panel. It must be placed inside a Collapsible.
<nord-collapsible-trigger></nord-collapsible-trigger>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
open | open | Whether the associated panel is open. Set by the parent Collapsible; reflected so it can be styled. | boolean | false |
disabled | disabled | Whether the trigger is disabled. Set by the parent Collapsible. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot for the trigger label and/or an icon. |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to progressively disclose a single section of content behind a trigger, such as order details or advanced settings.
- Always pair a Collapsible Trigger with a Collapsible Panel inside a Collapsible.
- Give the trigger a clear, descriptive label so its purpose is obvious even when the panel is collapsed.