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?
falseDetermines 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?
trueIf 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?
trueWhether 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 ? :
falseDetermines 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