Introduction
An accordion allows to organise and display content in a collapsible and expandable manner. It consists of a series of vertically stacked sections, each section including a heading and its associated content. By default all accordions are collapsed. When a user clicks on a section's heading or label, it expands to reveal its content, and the previously expanded section collapses. This interactive behaviour enables users to navigate and access specific sections of content without overwhelming the interface with excessive information.
Usage
Accordions are effective on smaller screens, as they reduce the need for excessive vertical scrolling, but they can also be employed on larger screens to enhance content organization. Avoid using an accordion when the user is expected to read the entire content, as it imposes the inconvenience of an additional click. It's important to note that accordions hide content from users, so they should not be used to show essential information. MDX Accordions only allow one item to be open at a time. Accordions are commonly used to present hierarchical content, such as FAQs, product descriptions, or categorised information, in a space-efficient and user-friendly manner.
Use the white accordion on a grey background and vice versa, so that they stand out from the content and are perceived as one grouped block of content.
Avoid using an accordion on the same background colour.
Cluster related content within an accordion, so users can easily navigate and access the desired information.
Avoid mixing unrelated content in one accordion as to not confuse users. Stick to related topics to help users easily find the information they need.
Use short titles to provide a quick and easily understandable overview of the content.
Avoid long titles to prevent excessive text wrapping, which can lead to a cluttered and confusing screens. This makes it harder to get an overview.
You can include both texts and images when in the expanded accordion. Titles should not include images though.
Never nest accordions as they are not supported in MDX and can lead to cogintive overload and user frustration.
Only display secondary information inside accordions that is not needed to complete a task inside an accordion.
Never use interactive elements, such as forms, in accordions. For showcasing progression use the progressive disclosure pattern instead.
Show only static stars within the accordion container, without including any links, as the container itself is clickable.
Refrain from using links inside the accordion container.
Mobile Specs
On screen widths smaller than 576px, the width should be set to 100vw (100% width).
Also known as
Toggle, Arrow toggle, Collapsible sections, Collapsible, Show-Hide-Thingy
Related