---
title: Accordion
description: A component used to create collapsible content that can be hidden and shown again.
date: 22-12-2024
---

## Preview

### Basic Usage

<Accordion title="Click to expand" defaultOpen={true}>
    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.
</Accordion>

### With Code Block

<Accordion title="Code Example" className="mt-4">
    ```javascript:utils.js showLineNumbers
    // Example of using the Accordion component
    import Accordion from '@/components/markdown/AccordionMdx';

    function Example() {
        return (
            <Accordion title="Click to see code">
                <pre>
                    {`function greet() {\n    console.log('Hello, world!');\n}`}
                </pre>
            </Accordion>
        );
    }
    ```
</Accordion>

### With Markdown Content

<Accordion title="Markdown Example" className="mt-4">
    ## This is a markdown heading

    - List item 1
    - List item 2
    - List item 3

    You can include **bold** and *italic* text, [links](#), and other markdown elements.
</Accordion>

## 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

<Tabs defaultValue="markdown" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="markdown">Markdown</TabsTrigger>
    <TabsTrigger value="codeblock">Code Block</TabsTrigger>
  </TabsList>
  <TabsContent value="markdown">
    ```plaintext
    <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>
    ```
  </TabsContent>
  <TabsContent value="codeblock">
    ````plaintext
    <Accordion title="Code Block" defaultOpen={true}>
        ```javascript:main.js showLineNumbers {3-4}
        function isRocketAboutToCrash() {
            // Check if the rocket is stable
            if (!isStable()) {
                NoCrash(); // Prevent the crash
            }
        }
        ```
    </Accordion>
    ````
  </TabsContent>
</Tabs>