Expandables

Overview

Expandables let you hide detailed content behind a clickable title.
Use Expandable for a single collapsible section and ExpandableGroup to show several expandables together (for example, FAQs).

You can work with expandables in two ways:

• Editor UI – Insert Expandable / Expandable Group blocks from the / menu (no code needed).

• MDX – Use the <Expandable> and <ExpandableGroup> components.

Common use cases:

• FAQ sections with collapsible answers

• Optional configuration details

• Advanced settings or troubleshooting steps

• Grouped related information under one heading

Using Expandables in the editor UI

Add a single expandable

1. Place your cursor on the new line, where you want the section.

2. Type / and search for Expandable.

3. Select Expandable to insert an accordion-style block.

Each expandable has:

• A title row: Click the title text to rename it.

• A content area (“Add your content here…”)

Set the default state (open or closed)

For each individual expandable:

• Use the expand/collapse icon on the right side of the header to choose the default state.

• When you click it while the item is open, the tooltip shows “Set Default State to Collapsed” (and vice versa).

• This only affects how it appears when the page first loads; readers can still open/close it afterward.

Add an expandable group

1. Place your cursor on a new line.

2. Type / and search for Expandable Group.

3. Select it to insert a group with multiple items.

Within an Expandable Group you can:

• Click the +** button** centered at the bottom of the group to add another expandable item.

• Click the trash icon on the right of an item to delete just that expandable.

• Use the drag handle to reorder items in the group.

• Edit titles and content exactly as you do for a single expandable.

Using Expandable in the MDX

Use <Expandable> to create individual collapsible content sections in MDX.

<Expandable title="Click to expand" default-open="false">
  Add your content here...
</Expandable>

Default open

<Expandable title="Getting Started Guide" default-open="true">
  This expandable starts open by default.
</Expandable>

Rich content

Expandables can contain any content including headings, lists, code blocks, and other components:

<Expandable title="API Configuration" default-open="false">
## Environment Variables

Set these variables in your `.env` file:

- `API_KEY` - Your API authentication key
- `API_URL` - Base URL for API calls (default: `https://api.example.com`)

```bash
# Example .env file
API_KEY=your-secret-key
API_URL=https://api.example.com
```

<Callout kind="warning">
  Never commit API keys to version control.
</Callout>
</Expandable>

Attributes

Using ExpandableGroup in the MDX

Use ExpandableGroup to organize multiple expandables together. Provides consistent spacing and visual grouping.

<ExpandableGroup>
<Expandable title="Installation" default-open="true">
Install the package using your preferred package manager:

```bash
npm install documentation-ai
```
</Expandable>

<Expandable title="Configuration" default-open="false">
Create a configuration file in your project root:

```json
{
  "name": "My Documentation",
  "theme": "light",
  "sidebar": true
}
```
</Expandable>

<Expandable title="Deployment" default-open="false">
Deploy your documentation using our CLI:

```bash
npm run deploy
```
</Expandable>
</ExpandableGroup>

npm install documentation-ai

Attributes

No attributes - ExpandableGroup is a simple wrapper for grouping multiple Expandable components with consistent styling.

Common patterns

• FAQ sections: Question in the title, answer in the content; keep the first or most important item open by default.

• Configuration options: Group related settings using ExpandableGroup so readers can jump to the parts they need.

• Advanced details: Keep pages clean by hiding long explanations or edge cases behind expandables.

• Progressive disclosure: Show essential information first and let users expand only what they care about.