Accordion

Introduction

Accordion is an interactive element that allows users to expand and collapse sections of content. Default action is to have only one section open at a time, which helps organize information and save screen space. If needed, it can be configured to allow multiple sections to be open simultaneously. If you want other colors or state colors, use Message expandable instead.

Variants

There are two variants of the accordion component in Bifrost:

• Basic accordion: This variant has no padding between elements and is ideal when the content of the panels is related.
• Styled accordion: This variant includes padding between elements and is suitable when the content of the panels is distinct.

Interactive demo

Try the interactive demo below to explore different accordion states and styles.

Best practices

• Clear titles: Use concise and descriptive titles for each accordion item to help users understand the content within.
• Limit items: Avoid overcrowding the accordion with too many items; this can overwhelm users.
• Consistent behavior: Ensure that the accordion behaves consistently across the application to provide a familiar user experience.

Examples

Here are some examples of how to use the accordion component:

Accordion in components

Accordion can be used within various components. See the links below for more information on how accordion can be integrated with these components. This is not an exhaustive list.