Types of Expand/Collapse

This page provides clarification among the 2 types of Expand/Collapse in our design system: Accordions and {In-line Expand}. All expand/collapse scenarios hide content and allow for it to be revealed inline when requested by the user.


 

Accordions

Accordions are a pattern where the entire module can be expanded from, or collapsed to a single line of text (Title) with a caret.

When to use: Accordions are typically used to break large amounts of content into distinct, consumable modules. When collapsed, it provides the user focus on the primary page content, and clear section titles. When expanded, it provides on-demand access to hidden (secondary) content or features.  Can contain can informational content or UI elements.

View detailed usage guidelines and resources


Inline Expand

The inline expand pattern involves partial exposure of the content in a module by default. The remaining content is hidden and can be revealed inline when requested by the user.

When to use: Use when you want to provide users an information scent of that content section, while increasing visibility of the neighboring section. Can contain can informational content only (no UI elements.)

View detailed usage guidelines and resources

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.