Accordion
A component used to create collapsible content that can be hidden and shown again.
Preview
Basic Usage
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
With Code Block
With Markdown Content
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Required. The text displayed in the accordion header. |
children | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
defaultOpen | boolean | false | When true, the accordion will be expanded by default. |
className | string | undefined | Additional CSS classes to apply to the accordion container. |
Output Markdown
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
</Accordion>
Published on Dec 22, 2024
