# Collapsible content

The "Collapsible Content" section allows users to expand or collapse information, making it easy to navigate large amounts of text. This feature enhances user experience by providing a cleaner layout and enabling visitors to access only the information they want to see.

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FA2L3c7Plrf7drFOiIMik%2Fcollap-c.jpg?alt=media&#x26;token=7e20b695-bcfb-4331-bf29-414a54fa522e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Collapsible content**
3. Make necessary changes. > **Save.**
   {% endhint %}

## General Settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FckgIzZaXpAsnRpjLpIuC%2Fcollap-g.jpg?alt=media&#x26;token=06ffb92e-ff99-4fbd-bab4-e1518c00aa22" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From Heading 1 to Heading 6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### Collapsible content

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FFJe4jkwIzaIofFQLt0Yl%2Fcolla-h.jpg?alt=media&#x26;token=3322fa35-5c4c-4d24-9619-2ebc1d29fa36" alt=""><figcaption></figcaption></figure>

* **Heading size**
* **Open first collapsible row by default**
* **Enable narrow content -** Make column width smaller
* **Image**
* **Image ratio** - Adapt to image / Square (1:1) / Portrait (3:4) / Landscape (4:3) / Landscape (5:3.5) / Wide (16:9)
* **Desktop layout** - Image first / Image second

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F0AOL06I27jM5V1nkNOrt%2Fcolla-b.jpg?alt=media&#x26;token=e9f6291b-fe9a-401b-ae2d-e19ec1b6f519" alt=""><figcaption></figcaption></figure>

* **Background**
* **Text color**
* **Border color**

### Section padding

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fc0cazMLYpU5yjLuS4vGl%2Fpadding-c.jpg?alt=media&#x26;token=d8c91b56-445e-4ea5-bbc5-f825cf08e577" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Collapsible content.**
2. **Add Block**
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fv2EJmOd5UIz9NGzkGRJm%2Fcolla-he.jpg?alt=media&#x26;token=b4cfded7-c8a8-4670-8901-56bcf025a1d2" alt=""><figcaption></figcaption></figure>

### Heading

* Heading&#x20;
* Heading size&#x20;

### Collapsible row

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FIs430OTnsJup8gFCm26h%2Fcollap-r.jpg?alt=media&#x26;token=d7a54bd5-6232-4a7c-8a95-1195a24211f2" alt=""><figcaption></figcaption></figure>

* Heading
* Icon
* Row content
* Row content from page