AccordionGroup

AccordionGroup component allows you to group multiple Accordion components to display a set of collapsible blocks.

Example

Block 1

Block 2

Block 3

Code:

<AccordionGroup>
    <Accordion title="Block 1">
        Content of Block 1
    </Accordion>
    <Accordion title="Block 2">
        Content of Block 2
    </Accordion>
    <Accordion title="Block 3">
        Content of Block 3
    </Accordion>
</AccordionGroup>

Set Default Expanded Item

Block 1 (Set to close)

Content of Block 1

Block 2 (Set to open)

Code:

<AccordionGroup>
    <Accordion title="Block 1 (Set to close)" defaultOpen={true}>
        Content of Block 1
    </Accordion>
    <Accordion title="Block 2 (Set to open)">
        Content of Block 2
    </Accordion>
</AccordionGroup>

Add Icons

Block 1

Block 2

Block 3

Code:

<AccordionGroup>
    <Accordion title="Block 1" icon="material-two-tone-storefront">
        Content of Block 1
    </Accordion>
    <Accordion title="Block 2" icon="material-two-tone-business_center">
        Content of Block 2
    </Accordion>
    <Accordion title="Block 3" icon="material-two-tone-cottage">
        Content of Block 3
    </Accordion>
</AccordionGroup>

Parameter Description

Accordion

Example#

Set Default Expanded Item#

Add Icons#

Parameter Description#

Example

Set Default Expanded Item

Add Icons

Parameter Description