# Accordions
Use Mintlify-style accordions to group optional details without interrupting the main implementation path.
Source: /docs/components/accordions
Last modified: 2026-06-20
Accordions keep secondary information available without forcing every reader through it. Use them for grouped questions, troubleshooting branches, and optional implementation notes.


> **Use accordions after the main path**
>

  If the detail changes the required setup flow, keep it visible in the article. If it helps only some readers, put it in an accordion.


## Single accordion


> **I am an Accordion.**
>

  You can put any content in here, including other components, like code:

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


````mdx title="accordion-single.mdx"

> **I am an Accordion.**
>

  You can put any content in here, including other components, like code:

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


````

## Accordion groups

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


> **Getting started**
>

    You can put other components inside Accordions.

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


> **Advanced features**
>

    Add icons to make accordions more visually distinct and scannable.


> **Troubleshooting**
>

    Keep related content organized into groups.


````mdx title="accordion-group.mdx"


> **Getting started**
>

    You can put other components inside Accordions.

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


> **Advanced features**
>

    Add icons to make accordions more visually distinct and scannable.


> **Troubleshooting**
>

    Keep related content organized into groups.


````

## Direct links and default state

When an accordion opens, the URL hash updates. Use `id` for stable anchors and `defaultOpen` when imported docs need one item open on first render.


> **Can accordions link directly?**
>

  Yes. Accordions can receive stable IDs so support notes and related docs can link to a specific answer.


```mdx title="accordion-direct-link.mdx"

> **Can accordions link directly?**
>

  Yes. Accordions can receive stable IDs so support notes and related docs can link to a specific answer.


```

## Properties


- `title` (string; required):
  Title in the Accordion preview.


- `description` (string):
  Detail below the title in the Accordion preview.


- `defaultOpen` (boolean; default: false):
  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. Plandalf accepts common Mintlify icon names, Lucide names, library-prefixed names such as `lucide:chevron-down`, image paths, and inline SVG strings.


- `iconType` (string):
  Imported icon style metadata, such as `regular`, `solid`, `light`, `thin`, `duotone`, or `brands`. Plandalf preserves this metadata and maps supported icons through the shared docs icon layer.


## Related components


  - [Expandables](/docs/components/disclosure-views#accordions-and-expandables): Use for one local reveal.
  - [Views](/docs/components/disclosure-views#views): Switch between reader contexts.
  - [Steps](/docs/components/steps): Keep required setup visible.