Accordion

The Accordion component can be used to group information, reveal and hide content.

OverviewPropertiesUsage

Import

import { Accordion } from '@dynatrace/strato-components-preview/content';

Use cases

CodeSandbox

Add a section

You can add a section to the Accordion component by using the Accordion.Section, Accordion.SectionLabel and Accordion.SectionContent components. When adding a section a unique identifier has to be set using the id prop. This allows to correctly expand and collapse the according sections.

CodeSandbox

Interactive header

By default the whole header is interactive and can open and close the Accordion.Section. If set to false only the button is interactive.

Note

Keep into consideration that, you shouldn't add interactive content to the Accordion.SectionLabel when the entire header is interactive to avoid nesting interactive elements.

CodeSandbox

Polymorph the Accordion.Section component

By default, the Accordion.Section component is rendered as a standard div element. For layouting purposes, the component can be polymorphed to any other component. This can be used, for example, to create a Surface layout inside an Accordion component.

CodeSandbox

Change the position of the trigger

The position of the trigger in the Accordion is the same for every section. By default the trigger is at the end of a section header. In order to change the position to the beginning of a section header, you need to set the triggerPosition prop to start.

CodeSandbox

Change the color

You can use the color prop to style the Accordion with a different color. Setting the color affects the button, label, content, and divider color. If no color is specified, it's set to neutral.

You can also use the color prop on the Accordion.Section to style one section. If no color is specified, the color of the Accordion is used.

CodeSandbox

Show and hide dividers

You can use the showDividers prop to show or hide dividers. If no showDividers If no showDividers is specified, it's set to true.

CodeSandbox

Change the size

You can use the size prop to set a smaller or bigger Accordion size. If no size is specified, it's set to default.

CodeSandbox

Disable sections

In the Accordion, you can disable each section individually by adding the disabled prop to the Accordion.Section component. With setting a section to disabled, the defaultExpanded prop, which is optionally set on the Accordion component, determines whether it is initially expanded or collapsed. The user can no longer change the expanded state of the section.

CodeSandbox

Expand multiple sections

Use the multiple prop to enable expanding multiple sections at the same time.

CodeSandbox

Expand a single section by default

Use the defaultExpanded to specify the section that should be initially expanded. The passed value should be a string or a number depending on the specified section id.

CodeSandbox

Expand multiple sections by default

Use the defaultExpanded to specify the sections that should be initially expanded. The passed value should be an array of strings or numbers depending on the specified section ids.

CodeSandbox

Control the state

You can also handle the state of the Accordion component, making it controlled. In order to do so, you need to set the expanded prop to assign the state value. In addition, you need to use the onExpandChange prop to provide a handler that is called when the state of the Accordion changes.

CodeSandbox

Keep SectionContent mounted

By default, when the Accordion.Section content is not visible to the user, it will also be removed from the DOM to prevent unwanted component updates on hidden elements. If you want to keep the Accordion.Sections content in the DOM to preserve the state, you can set the keepMounted prop on the component.

CodeSandbox