Accordion

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

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

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

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

PropTable

AccordionProps

Signature:

export declare type AccordionProps< extends > = <> & (<> | <>);

AccordionOwnProps

extends, ,

Name	Type	Default	Description
multiple?		false	Determines whether multiple sections can be open at the same time.
triggerPosition?	|	'end'	The position of the trigger that expands and collapses a section.
onExpandChange?	(value: <>) =>	-	Callback fired when a section is expanded/collapsed.

AccordionControlledProps

Name	Type	Default	Description
expanded	extends true ? :	-	Determines which sections are expanded in a controlled scenario.

AccordionUncontrolledProps

Name	Type	Default	Description
defaultExpanded?	extends true ? :	false	Determines which sections are initially expanded in an uncontrolled scenario.

Accordion.Section

AccordionSectionProps

extends, ,

Name	Type	Default	Description
disabled?		false	Determines whether the section is disabled.
id	|	-	Unique identifier of a section within an accordion.
keepMounted?		false	Defines if the sections content will be kept in the DOM, even if the content is not shown to the user.