Resources
Intro & Anatomy
Expand and collapse components allow users to reveal or hide portions of content within existing text blocks, similar to accordion functionality but focused on text truncation rather than section organisation.
Use expand & collapse to manage lengthy content such as reviews, comments, or descriptions where users can choose to read more detail.
Unlike accordions that organise content below titles, expand & collapse truncates existing content and provides controls to reveal the full text.
Options & Styles
States
Closed state displays 2-5 lines of preview text with expand controls
Open state reveals the complete content with collapse controls
Best Practice & Usage
Expand & collapse should manage secondary content length whilst ensuring primary information remains immediately accessible. Use this pattern to handle variable-length content without overwhelming the interface.
Use to reveal additional portions of text blocks with non-primary information, such as parts of comments or reviews.
Don't hide content directly below titles; use accordions instead for structured content organisation.
Use for secondary content that isn't necessary for users' understanding of the primary flow, e.g. extended reviews or descriptions.
Avoid hiding primary text in expand & collapse components. Use buttons to navigate to different pages or sections for essential information.
Hide non-crucial text that users can optionally expand for more detail.
Don't make users expand content to access primary actions such as sign-up forms or essential navigation.
Theming
You can customize font styles and weights, colours, and spacings to match your design requirements.