Components

Collapse

A helper element for expandable / collapsible sections

Overview

  • Available since: New York
  • A11Y: WCAG 2.1 AA

Collapse allows users to toggle the visibility of content. It's useful for managing large amounts of content that users can show or hide as needed.

ServiceNow link
Collapse code documentation

UIB and developer guidance

Figma link
Collapse Figma component

Horizon components and styles library

Loading playground

When to use

Use collapse to manage space effectively, especially when you need to present a large amount of content or options that aren’t all immediately relevant to the user. It's ideal for product descriptions, or hiding advanced options.

When not to use

Don't use collapse for essential information that users need to see right away. If it's critical for their task, keep it visible and look for other ways to organize your content.

Anatomy

Collapse affects the behavior of other components and doesn't have individual parts.

Subcomponents

See usage guidance for accordion

Usage

You must use collapse within another component or container to collapse and expand sections on a page or within a component.

content tree example of using the collapse component

In this example, collapse is used within a content tree. When the user selects 'Show More,' the remaining nodes appear.

content tree example of using the collapse component

In this example, collapse is used within a card. When the user selects 'Show More,' the remaining card content appear.

Remember not to confuse this utility component with accordion. Accordion is a component that offers consistent collapsible sections for customizing labels, icons, and other actions. Collapse, on the other hand, is a component behavior for use cases outside of accordion.

accordion component with a section expanded

In this example, the user is showing the different content sections for a laptop in an accordion.

Configurations

Learn how to customize collapse by configuring the available properties.

Expand and collapse

You can configure whether the collapsible section is expanded or collapsed by default. This depends on what you want to show the user when the experience loads.

Collapse trigger

Use the collapse trigger component with the collapse utility component to give the user an element (like a button) or an area they can select to control the expand and collapse functionality.

Design recommendations

Always use the collapse trigger in conjunction with collapse.

Behavior

Learn how collapse behaves when the display changes or a user interacts with the component.

Interactions

The user can select the trigger, which can be an element or an area (depending on how you design it), to show or hide a section.

Truncation

Collapse doesn't have any text, so it doesn't have any specific considerations for truncation. However, you can use collapse to show the full text when it is truncated (like with the "Show more" disclosure control).

Usability

Collapse complies with all internationalization and accessibility requirements.

Accessibility

Learn how to access the actionable elements of collapse through keyboard interactions and screen readers.

Keyboard interactions

If you include an element (like a button or icon) as the trigger for collapse, that element shows up in the tab order. You can access the actionable elements associated with collapse with these keyboard keys:

  • Tab: Moves focus to the first selectable element
  • Shift + Tab: Moves focus to the previous selectable element
  • Space or Enter: Selects the element and initiates the expand or collapse behavior

Screen readers

Collapse is only visible to a screen reader when expanded. Use ariaHidden to read a string to the user to indicate whether the collapsible section is visible to a screen reader. When you use collapse trigger with collapse, it automatically updates aria-expanded and aria-controls.