Accordion

An accordion is a UI component that organizes content into collapsible sections, allowing users to expand or collapse panels as needed. It helps keep interfaces clean by displaying only relevant information while providing quick access to additional details.

Note about gap: By default, accordions do not have any gap between panels (accordion items). If you want to add a gap, you can apply a custom gap to the ch-accordion-render element. In a future Mercury release, generic gap classes will be available, allowing you to apply them as needed.

By default, the Accordion does not implement any padding. This is a general rule followed by other components in the Mercury design system. To apoply padding, you can use any combination of the provided CSS classes designed for this purpose. Learn more about the spacing classes on the spacing documentation page . All the examples that follow display the Accordion with padding, by applying the .spacing-body class.

1. Accordion Filled

A filled accrodion features a solid background color, making it stand out visually. It’s ideal for emphasizing important sections or ensuring the accordion content is clearly distinguished from the background.

1.1. Filled

1.2. Filled: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


1.3. Filled With Icons

1.4. Filled With Icons: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


1.5. Filled: Elevation 1 (Default)

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a surface background (body background color), the .elevation-1 class is unnecessary, as it is applied by default.


1.6. Filled: Elevation 2

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-1 background color, apply .elevation-2 class on the component.


1.7. Filled: Elevation 3

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-2 background color, apply .elevation-3 class on the component.


2. Accordion Filled Header

A filled header accordion applies a solid background to the header while keeping the content transparent. It highlights section titles without adding visual weight to the content.

2.1. Filled Header

2.2. Filled Header: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


2.3. Filled Header With Icons

2.4. Filled Header With Icons: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


2.5. Filled Header: Elevation 1 (Default)

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a surface background (body background color), the .elevation-1 class is unnecessary, as it is applied by default.


2.6. Filled Header: Elevation 2

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-1 background color, apply .elevation-2 class on the component.


2.7. Filled Header: Elevation 3

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-2 background color, apply .elevation-3 class on the component.


3. Accordion Outlined

An outlined accordion features a border without a solid background, giving it a more subtle look compared to the filled version. It's perfect for when a less intrusive, cleaner appearance is preferred while still providing clear separation from the background.

3.1. Outlined

3.2. Outlined: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


3.3. Outlined With Icons

3.4. Outlined With Icons: Disabled

To disable the Accordion, simply add the disabled attribute. This will prevent interactions and update the styling accordingly.


3.5. Outlined: Elevation 1

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a surface background (body background color), the .elevation-1 class is unnecessary, as it is applied by default.


3.6. Outlined: Elevation 2

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-1 background color, apply .elevation-2 class on the component.


3.7. Outlined: Elevation 3

Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-2 background color, apply .elevation-3 class on the component.


4. Customizations

This section explores accordion customizations for both filled and outlined accordions, showcasing how each variant can be used effectively in different scenarios.


4.1. Custom Header

Use the header slot to customize the panel header with your own content.

Some notes about the custom header:

  • The header slot replaces the default caption. If you want a caption that matches the default styling, you need to add it within the slot and apply the .subtitle-semi-bold-xs class to the slot container. This ensures the caption uses the same font style as the accordion header.
  • You have full control over the alignment of the slotted header content.
  • While this example uses a "filled" accordion, the header slot works with any accordion style.