# Accordion

> Interactive panels for toggling visibility of content.

Source: https://docs.doccupine.com/accordion

> For the complete documentation index, see [llms.txt](https://docs.doccupine.com/llms.txt).

# Accordion

Interactive panels for toggling visibility of content.

Accordion elements help organize information by letting users show or hide sections as needed. They’re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.

## Accordion Usage

You can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:

````html
<Accordion title="What is MDX?">
  You can put any content in here, including other components, like code:

  ```java
  class HelloWorld {
    public static void main(String[] args) {
      System.out.println("Hello, World!");
    }
  }
  ```
</Accordion>
````

<Accordion title="What is MDX?">
  You can put any content in here, including other components, like code:

  ```java
  class HelloWorld {
    public static void main(String[] args) {
      System.out.println("Hello, World!");
    }
  }
  ```
</Accordion>

## Open by default

Pass `defaultOpen` to have the panel expanded on first render instead of collapsed:

````html
<Accordion title="Read me first" defaultOpen>
  This panel starts expanded.
</Accordion>
````

<Accordion title="Read me first" defaultOpen>
  This panel starts expanded.
</Accordion>

## Properties

<Field value="title" type="string" required>
  The title of the accordion.
</Field>

<Field value="children" type="node" required>
  The content of the accordion.
</Field>

<Field value="defaultOpen" type="boolean">
  Whether the panel is expanded on first render. Defaults to `false`.
</Field>