Accordion Groups
Accordion groups are designed to organize content into collapsible sections, enabling users to expand and collapse each section as needed for a streamlined and manageable browsing experience.
Last updated
Accordion groups are designed to organize content into collapsible sections, enabling users to expand and collapse each section as needed for a streamlined and manageable browsing experience.
Last updated
Accordion Groups are ideal for efficiently managing space while organizing large amounts of content into digestible sections. They are perfect for interfaces such as FAQs and forms, where users benefit from accessing detailed sections one at a time without the clutter of too much visible information simultaneously.
Each accordion group consists of multiple collapsible sections, each with a title that users can click to expand or collapse. This component may include an 'Expand All' button, allowing users to open all sections at once for quick access. Icons next to each title indicate the current state—expanded or collapsed—and provide a visual cue for operation, enhancing user interaction and accessibility.
Group Title: Sits at the top of the accordion group, giving a general overview or category title that encompasses all underlying accordion sections.
Group Lead-Icon: An icon associated with the group title, enhancing the visual representation of the overall content category.
Group Sub-title: A supplementary title under the main group title, providing additional context or detail about the group’s content.
Expand/Collapse Button: A button that allows users to expand or collapse all accordion sections within the group simultaneously, improving usability for navigating large information sets.
Individual Accordion Titles: Each accordion within the group has its own title, guiding the user to the specific content contained within each section.
Lead-Icon for Each Accordion: Icons corresponding to each individual accordion title, visually representing the type of content within.
Sub-title for Each Accordion: A sub-title for additional details beneath each accordion title, offering more specific information about the content before opening the accordion.
Description Text: Additional text that can appear beside the collapse icon, offering brief information about the accordion’s content or state.
Link Button: Actionable buttons within the accordion content, providing links or actions related to the accordion’s content.
Collapse Icon: Icons next to each accordion title that indicate whether the accordion is open or closed, typically shown as an up or down arrow.
Do use clear and concise titles for both the group and individual accordions.
Don't clutter titles with unnecessary information that could overwhelm the user.
Do include icons that are intuitive and help visually distinguish between different sections.
Don't use overly complex or similar icons for different sections, which can cause confusion.
Do provide a Group Sub-title if additional context helps clarify the grouped content.
Don't make sub-titles too lengthy; keep them brief and to the point.
Do implement an Expand/Collapse All button to enhance user convenience.
Don't hide the Expand/Collapse functionality where users might expect to control visibility.
Do provide additional description text where necessary to inform the user.
Don't use inconsistent styles that may confuse users.
Update the state of the accordion in real-time as sections are expanded or collapsed.
Don't use accordions if you cannot provide real-time updates.
