Collapsible primitive

Headless Collapsible: the behavior, keyboard support and ARIA of the WAI-ARIA Disclosure (Show/Hide) pattern, with no styles.

@ndop/primitives/collapsible
WAI-ARIA: Disclosure (Show/Hide)

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Collapsible is built on this one.

import {
  NdCollapsible,
  NdCollapsibleContent,
  NdCollapsibleTrigger,
} from '@ndop/primitives/collapsible';

Accessibility

Implements the Disclosure (Show/Hide) pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Enter`	On the trigger, shows or hides the content.
`Space`	On the trigger, shows or hides the content.

Focus

Focus stays on the trigger when the content shows or hides.
Shown content joins the tab order after the trigger; hidden content leaves it.

Right-to-left

Nothing mirrors.

API reference

NdCollapsible

[ndCollapsible]from @ndop/primitives/collapsible

Root of a collapsible: a trigger that shows and hides a section of content, the WAI-ARIA disclosure pattern. It holds the open state, which renders on the server too, since the content stays in the page.

NdCollapsible binding	Type	Default
`[defaultOpen]` Initial open state when `open` is not bound.	`boolean`	`false`
`[disabled]` Stops the trigger from toggling the content.	`boolean`	`false`
`[(open)]` Whether the content is shown. Two-way bindable with `[(open)]`.	`boolean`	`false`

Data attribute	Values
`data-state`	—
`data-disabled`	—

NdCollapsibleContent

[ndCollapsibleContent]from @ndop/primitives/collapsible

The content a NdCollapsible shows and hides. While closed it has the hidden attribute, so it's out of the accessibility tree and the tab order. For the styled layer to animate it, it sets --nd-collapsible-content-height to its height when it opens or closes, stays visible until a closing animation ends, and has data-animating while one runs; no animation plays on the first render.

Data attribute	Values
`data-state`	—
`data-animating`	—

NdCollapsibleTrigger

button[ndCollapsibleTrigger]from @ndop/primitives/collapsible

The button that shows and hides a NdCollapsible's content. Use a native button, so Enter and Space activate it.

Manages aria-expanded, aria-controls.

Data attribute	Values
`data-state`	—
`data-disabled`	—