Accordions

Use the accordion component to show and hide content sections, organize related information, and enable progressive disclosure in your docs.

Use accordions to organize information and progressively disclose content. Users can expand and collapse each section.

When you open an accordion, the URL hash updates, which lets you share direct links to specific accordion sections.

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

<Accordion title="I am an Accordion.">
  You can put any content in here, including other components, like code:

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

Group related accordions together using <AccordionGroup>. This creates a cohesive section of accordions that can be individually expanded or collapsed.

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

<AccordionGroup>
  <Accordion title="Getting started">
    You can put other components inside Accordions.

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

  <Accordion title="Advanced features" icon="alien-8bit">
    Add icons to make accordions more visually distinct and scannable.
  </Accordion>

  <Accordion title="Troubleshooting">
    Keep related content organized into groups.
  </Accordion>
</AccordionGroup>

• title (string, required) — Title in the Accordion preview. Supports inline Markdown formatting, such as **bold**, _italic_, and `code`.

• description (string) — Detail below the title in the Accordion preview.

• defaultOpen (boolean) — Whether the Accordion is open by default.

• id (string) — A custom ID for the accordion used for anchor linking. If omitted, defaults to the same value as title.

• icon (string) — The icon to display.

Options:

• Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
• Lucide icon name, if you have the icons.library property set to lucide in your docs.json
• Tabler icon name, if you have the icons.library property set to tabler in your docs.json
• A single emoji (for example, 💡 or 🚀)
• URL to an externally hosted icon
• Path to an icon file in your project
• SVG code wrapped in curly braces

For custom SVG icons:

1. Convert your SVG using the SVGR converter.
2. Paste your SVG code into the SVG input field.
3. Copy the complete <svg>...</svg> element from the JSX output field.
4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
5. Adjust height and width as needed.

• iconType (string) — The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

• className (string) — Additional CSS classes to apply to the accordion. Also accepted on AccordionGroup.

• How to link documentation pages effectively
• Navigation
• Components overview