Anatomy
- Header: The top area of the collapse where the title and trigger sit. This area is always visible and can be clickable to expand and collapse the panel.
- Title: A descriptive text that tells the user what the content in the panel is about.
- Trigger: A visual indicator that provides a clue to the user to collapse or expand the panel.
- Panel: The collapsable container where other components are placed and information is displayed.
Usage Guidelines
When to use this component
- Use a collapse when there is a need to save space. They are perfect for keeping a page clean and concise, especially on mobile devices or in sidebars.
- Use collapse to make pages shorter, and reduce scroll if the content is not crucial for the interaction.
- Use a collapse for secondary information like product specifications, FAQ sections, or optional details that don't need to be seen immediately.
- Use a collapse when there is a need to organize complex content. They can break down long forms or multi-step processes into logical, manageable chunks, making the user experience less overwhelming.
- Use a collapse when the users can to see one or more than one section at a time.
When not to use this component
- Don't use a collapse for content that is crucial for the user to complete a task, such as a contact form, a product's main features, or a product's price. Hiding this information forces the user to interact with the interface just to get basic context.
- Don't use a collapse if the user needs to compare different sections of content. Forcing them to open and close multiple sections makes comparison difficult and inefficient. In these cases, Tabs or a simple list is more effective.
- Don't use a collapse if the information in each section is only a sentence or two. The extra interaction required to open the section outweighs the benefit of hiding the content. A simple, un-collapsible list is a better solution.
- Never use a collapse for a single section. A single collapsible section provides no organizational benefit and only serves to hide information. If there is only one section to display, just show the content directly on the page.
Best Practices
Collapse components can stack in order to display different sections and categories of information.
Never place an accordion inside another accordion. This creates a confusing and frustrating user experience, making content nearly impossible to find.
Using a single Collapse is generally not recommended. When you only have one accordion, you are essentially just hiding content behind a single click. There is no organizational benefit and no visual clutter to reduce, as there is nothing for the content to be grouped with. It's often better to just display the content directly on the page, where it's immediately accessible and discoverable.
Do not use them if the user needs to switch quickly between sections as the other sections might be pushed down. Use tabs instead.
General Component Behaviors
- The entire header is clickable and will collapse or expand the panel.
- A collapse begins by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.
- A collapse must always expand information below the title.
- The title or control must clearly show there’s an interaction available to the user to expand or collapse.
- Collapses in a group must always have the same width.
- The title and content needs to feel part of the same thing.
A user can then independently expand each section of the accordion allowing for multiple sections to be open at once.
Collapse component can be placed into cards to give structure to the content.
A collapse can be placed directly onto the UI to integrate better with the surrounding content.
Collapse can be stacked inside a card. Make sure that the content is all related and makes sense to be grouped together.
Responsive Behavior
The collapse will shrink or expand to fit the space of the container it is placed within. All content inside the collapse will also respond accordingly.
States
The Collapse component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.
Content Guidelines
1. Title and Heading Guidelines
The title of each accordion section is the most important piece of content. It must be clear and descriptive because it's the only thing the user sees before clicking.
- Be Clear and Concise: The title should be short enough to be scannable but long enough to convey the content's purpose. Avoid vague labels like "Details," "More Info," or "Click Here."
- Use Descriptive Language: For an FAQ, the title should be a direct, natural-language question (e.g., "What is your return policy?"). For a product page, it should be a clear category (e.g., "Technical Specifications" or "Shipping Information").
- Use Proper Heading Tags: For accessibility, accordion headers should be coded as headings (H2, H3, etc.) to establish a logical page structure that screen readers can navigate.
2. Content Within the Panel
The content inside the accordion panel should be as focused and organized as the title suggests.
- Be Relevant: The content must directly address the title. If the title is "How do I reset my password?", the content should provide step-by-step instructions for resetting a password and nothing more.
- Organize for Readability: Use headings, bulleted lists, bold text, and other formatting to break up long paragraphs. This makes the content easier to scan once the user opens the panel.
- Keep It Focused: Avoid putting large images, videos, or complex interactive elements that might cause the page to jump or feel clunky. The accordion's purpose is for text-heavy content.
For further information, see the Content Styleguide.