---
title: Expandable
description: Expandable creates a simple show/hide toggle for content that readers may want to see but isn't essential to the main flow.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use Expandable to tuck away verbose API responses, troubleshooting steps, or supplementary details that would otherwise break the reading flow. It renders as a single clickable disclosure -- lighter than Accordion, which is built for grouped, navigable sections.

Use Expandable when:
- **Supplementary details** would interrupt the main narrative
- **Optional information** benefits some readers but not all
- **Long content** (like full API responses) should be collapsed by default

## Basic Usage

<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>

```mdx
<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>
```

## Default Open

Start expanded:

<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>

```mdx
<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>
```

## Common Use Cases

### API Response Details

Collapse verbose responses that would otherwise interrupt the documentation flow:

<Expandable title="View full response">
```json
{
  "id": "123",
  "name": "Example",
  "metadata": {
    "created": "2024-01-01",
    "updated": "2024-01-15"
  }
}
```
</Expandable>

### Troubleshooting Steps

<Expandable title="Having connection issues?">
  1. Check your network connection
  2. Verify the API endpoint is correct
  3. Ensure your API key is valid
</Expandable>

## Props

<ParamField name="title" type="string" required>
  Section header text.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Start expanded.
</ParamField>

## Expandable vs Accordion

| Feature | Expandable | Accordion |
|---------|------------|-----------|
| Purpose | Hide supplementary content | Organize sections of equal importance |
| Icons | No | Yes |
| Descriptions | No | Yes (subtitle support) |
| Grouping | Standalone | Can be grouped with AccordionGroup |
| Best for | Optional details, long examples | FAQs, feature lists, navigation |

**Rule of thumb:** If the content is "nice to have," use Expandable. If users need to choose between sections, use Accordion.

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>