# 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FyMn3cDtHbkHl4cBuChWW%2F2025-04-04_11-06-52.jpg?alt=media&#x26;token=f9b7a82f-c800-4b05-985d-9c0bac6f98bf" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="success" %}
**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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FIXYOfxs9UmV5aKIgmFQ7%2F2025-04-04_11-11-06.jpg?alt=media&#x26;token=4a86afad-95ca-4597-99e4-d0acedffaf29" alt="" width="282"><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FOPhvH4HYNoj25kUqMMv8%2F2025-04-04_11-13-27.jpg?alt=media&#x26;token=ba07cc1c-2f64-4568-9ce2-9efd8fba5025" 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FpmaHiSH4yi7VutzUCxcw%2F2025-04-04_11-15-17.jpg?alt=media&#x26;token=90aec3f0-e4d1-4f70-878a-a3b14609d4dd" alt=""><figcaption></figcaption></figure>

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

### Section padding

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/n2xL6bjz1tYl76g1pebr/padding-c.jpg" 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FrftGOhuDp2ScmwhzPCDp%2F2025-04-04_11-15-41.jpg?alt=media&#x26;token=44c3b244-3dcb-44cc-a145-059131fcad51" alt=""><figcaption></figcaption></figure>

### Heading

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

### Collapsible row

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FrftGOhuDp2ScmwhzPCDp%2F2025-04-04_11-15-41.jpg?alt=media&#x26;token=44c3b244-3dcb-44cc-a145-059131fcad51" alt=""><figcaption></figcaption></figure>

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