---
title: Expandable Headings
icon: chevrons-down
---

Expandable headings let users collapse and expand content sections — ideal for FAQs, long reference docs, or optional details. Three levels are supported.

<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>

## Syntax

<CodeblockTabs>

MDX

```html
<ExpandableHeading>
# Expandable Heading 1
Content that will be collapsible.
</ExpandableHeading>

<ExpandableHeading>
## Expandable Heading 2
Content that will be collapsible.
</ExpandableHeading>

<ExpandableHeading>
### Expandable Heading 3
Content that will be collapsible.
</ExpandableHeading>
```

Markdown

```markdown
:::::ExpandableHeading
# Expandable Heading 1
Content that will be collapsible.
:::::

:::::ExpandableHeading
## Expandable Heading 2
Content that will be collapsible.
:::::

:::::ExpandableHeading
### Expandable Heading 3
Content that will be collapsible.
:::::
```

</CodeblockTabs>
