Collapse

Disclosure styling for native details or an application-controlled region. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• collapse, collapse-title, collapse-icon, collapse-content, collapse-folds, collapse-marker-reset, collapse-chevron, collapse-motion

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<details class="collapse">
  <summary class="collapse-title">Installation details</summary>
  <div class="collapse-content">Add the preset in your CSS entry.</div>
</details>

Variants and composition

collapse with title/content is the grid-based form. Native details can use collapse-marker-reset, collapse-chevron, and optional collapse-motion; collapse-folds is a separate immediate-hiding contract.

Keep collapse-title directly under collapse and collapse-icon directly under the title. Apply collapse-marker-reset and collapse-chevron to the direct summary of a native details; the chevron reads its own disclosure state, including inside nested disclosures.

Behavior and accessibility

Native details provides disclosure state and keyboard behavior. collapse-motion is a separate native enhancement; do not combine it with the grid-based collapse or collapse-folds contracts.

Reference

See the interactive Storybook specimen ↗. Continue to Color Input or return to the Official preset overview.