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