---
title: Expandable headings
slug: docs/expandable-headings
docTags: 
createdAt: 2026-06-05T13:06:40.614Z
---

[Expandable heading](docId\:aJpn6HeMcswfb9RR4hDHZ) blocks let users collapse and expand sections of content. They are useful for FAQs, optional details, and long reference pages where readers may not need to see all information at once.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::ExpandableHeading
# Expandable Heading 1
This is the largest expandable heading. Click to collapse or expand.
:::::

:::::ExpandableHeading
## Expandable Heading 2
A medium expandable heading. Use it for subsections that users can toggle.
:::::

:::::ExpandableHeading
### Expandable Heading 3
The smallest expandable heading. Good for optional details or FAQ items.
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<ExpandableHeading>
# Expandable Heading 1
This is the largest expandable heading. Click to collapse or expand.
</ExpandableHeading>

<ExpandableHeading>
## Expandable Heading 2
A medium expandable heading. Use it for subsections that users can toggle.
</ExpandableHeading>

<ExpandableHeading>
### Expandable Heading 3
The smallest expandable heading. Good for optional details or FAQ items.
</ExpandableHeading>
```
:::
::::

Expandable Heading blocks support three heading levels:

- `#`&#x20;
- `##`&#x20;
- `###`&#x20;

The heading itself becomes the clickable element, while all content beneath it remains collapsible until the next heading or the end of the block.