Collapsible

A collapsible shows and hides an associated section of content, following the WAI-ARIA disclosure pattern.

Import

Import the Collapsible primitives from ng-primitives/collapsible.

import {
  NgpCollapsible,
  NgpCollapsibleTrigger,
  NgpCollapsibleContent,
} from 'ng-primitives/collapsible';

Usage

Assemble the collapsible directives in your template.

<div ngpCollapsible>
  <button ngpCollapsibleTrigger>Show details</button>
  <div ngpCollapsibleContent>The content that is shown and hidden.</div>
</div>

Grouping Collapsibles

For a single collapsible, use this primitive directly. If you need multiple sections with coordinated open state - where opening one may close another - reach for the Accordion primitive instead. Each accordion item is built on this same collapsible core.

API Reference

The following directives are available to import from the ng-primitives/collapsible package:

NgpCollapsible

NgpCollapsibleTrigger

NgpCollapsibleContent

Animations

The ngpCollapsibleContent primitive sets --ngp-collapsible-content-width and --ngp-collapsible-content-height CSS custom properties on the element. Use these with the data-enter and data-exit attributes to animate open and close. These attributes are only set on user interaction - not on initial render - so no animation plays on page load.

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

The trigger exposes aria-expanded and aria-controls, pointing at the content region. When the trigger is a <button> element the correct type="button" is applied automatically.

Keyboard Interactions

• Space - Toggle the collapsible when the trigger is focused.
• Enter - Toggle the collapsible when the trigger is focused.

Hidden Until Found

The ngpCollapsibleContent primitive uses the until-found attribute so the browser can search text within the collapsed region and reveal it if a match is found. If the browser does not support this functionality, the attribute is ignored.

More information about the until-found attribute can be found on Can I use.