---
title: Expandable Headings
slug: test-archbee/expandable-headings
docTags: 
createdAt: 2024-08-09T08:04:51.000Z
---

::loom{url="https://www.loom.com/embed/dcb8460d05144704b018ec9aa6b41aba?sid=1aea9071-051b-46b6-ac5c-0787e172af70"}

Expandable headings are a way to organize your documentation content and improve readability. They allow you to create sections that can be expanded or collapsed by users, making it easier to find specific information.

## Why use expandable headings?

- **Improved organization**
  Expandable headings help break down complex topics into manageable sections.
- **Enhanced readability**
  Users can focus on relevant information by expanding or collapsing sections.
- **FAQ-style format**
  Expandable headings are ideal for creating FAQ (Frequently Asked Questions) sections in your documentation.

## How to add a expandable heading

There are tree ways to create expandable headings in Archbee:

- Insert the heading from blocks menu. Type `/` and select the heading block

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-Q0PhUrYs2oeDDj9AKCKFh-20240809-090345.png "Add Expandable Heading")

- Converting an existing heading to expandable by type `>>` at the beginning of one, then hit space

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/QJHESQKMx60mUR4eagec9_expandable-headings.gif "Convert and unrwap them")

- Use markdown shortcuts to insert it:
  - `>>#` + `space` for Expandable Heading 1
  - `>>##` + `space` for Expandable Heading 2 
  - `>>###` + `space` for Expandable Heading 3 

To unwrap the content of the expandale heading, just delete the heading and you will be left with the text only.

## Allowed blocks for content

Inside the expandable headings, you can use **all blocks **for content, excepting the expandable heading block.

***

Here are some examples:

:::ExpandableHeading
# Expandable Heading 1

- You can add here any of the custom blocks available in Archbee's editor
:::

:::ExpandableHeading
## Expandable Heading 2

- You can toggle the heading as expandable or collapsible
:::

:::ExpandableHeading
### Expandable Heading 3

```javascript
fetch("https://api.cakes.com", {
  "method": "GET",
  "headers": {
    "Accept": "application/json"
  }
})
.then(response => {
  console.log(response);
})
.catch(err => {
  console.error(err);
});
```
:::

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
 ** Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](<././Editor Blocks.md>)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
\&#xNAN;**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
\&#xNAN;**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::