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