Accordion

Use the Accordion component to define a collapsible block for toggling content. It is open by default and hides the content when clicked again.

Example

Collapsible Block

This is the content inside the collapsible block, click to toggle.

Code:

<Accordion title="Collapsible Block" >
This is the content inside the collapsible block, click to toggle.
</Accordion>

The content inside the collapsible block follows Markdown syntax.

Default Collapsed Block

Code:

<Accordion title="Default Collapsed Block" defaultOpen={false}>
This is the content inside the collapsible block, default is closed.
</Accordion>

Set Icon

Introduce an icon to the collapsible block.

Code:

<Accordion title="Add Icon" icon="material-two-tone-storefront">
Introduce an icon to the collapsible block.
</Accordion>

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