# Accordion (https://openknowledge.ai/docs/reference/components/accordion)

Standalone expand/collapse via native HTML5 \<details>/\<summary>. Group siblings with the `name` prop for exclusive-accordion UX

## Example

> **Show me the details**
>
> Click to expand
>
> Native `<details>` under the hood — same substrate as the app render.
> Pass a shared `name` to sibling accordions and the browser will keep
> only one open at a time.

```mdx
<Accordion title="Title">
  Body content revealed when the accordion is expanded.
</Accordion>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `string` | yes |  | Heading shown inside the \<summary> |
| `defaultOpen` | `boolean` | no | `false` | When true, the block renders expanded on initial load |
| `icon` | `string` | no |  | Custom lucide icon override (e.g. \`lucide:Rocket\`) |
| `description` | `string` | no |  | Optional subtitle rendered below the title inside \<summary> |
| `id` | `string` | no |  | HTML id attribute for deep-linking (e.g. \`#advanced-options\`) |
| `name` | `string` | no |  | HTML5 \<details name=> group — siblings with the same name are mutually exclusive |

*Also matches:* `accordion`, `expandable`, `details`, `disclosure`, `collapse`, `fold`

## Author it

Type `/accordion` in the editor to insert it from the slash menu, or write the tag directly in source mode. The Properties panel on the right of the editor exposes every prop above as a form field once the block is selected.