Skip to main content

Accordion

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

AccordionProps

Signature:

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

AccordionOwnProps

extends, , ,
NameTypeDefaultDescription
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.

interactive?
true

If the accordion is interactive, the whole header is interactive and can open or close the accordion. Otherwise, only the button is interactive

color?
| | | |
'neutral'

The color of the accordion. Setting the color affects the button, label, content and divider color.

size?
|
'default'

The size of the accordion.

showDividers?
true

Whether a divider is shown between the sections.

AccordionControlledProps

NameTypeDefaultDescription
expanded
extends true ? :
-

Determines which sections are expanded in a controlled scenario.

AccordionUncontrolledProps

NameTypeDefaultDescription
defaultExpanded?
extends true ? :
false

Determines which sections are initially expanded in an uncontrolled scenario.

Accordion.Section

AccordionSectionProps

Signature:

export declare type AccordionSectionProps<E extends > = <E, >;
Still have questions?
Find answers in the Dynatrace Community