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:

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

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

Open by default

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

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

Properties