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

title

string

Title

required

Define the title of the collapsible block

description

string

Default status

optional

Detailed information below the collapsible block title

defaultOpen

boolean

Default status

optional

The collapsible block is open by default

Default:

true

icon

string

Icon

optional

Define the icon. For methods, see icon

Example#

Set Default Expanded Item#

Add Icons#

Parameter Description#

Example

Set Default Expanded Item

Add Icons

Parameter Description