# Collapsible content

***

The **Collapsible content** section is handy when showing important notices or information without taking up too much space.

### 1. Our guide to set up a Collapsible content section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Collapsible content.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/427b1e6d-8e6a-4ab3-8783-7232a195ee93/Screenshot%202023-11-27%20at%204.42.43%20PM.png" alt=""><figcaption></figcaption></figure>

### **2. Section blocks:**

* By default, there are **four** **blocks** added. You can edit them, remove them, or add more blocks.&#x20;

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FdL1ZGiW6OyrnihwZ3CTB%2FScreenshot%202023-12-23%20at%2010.11.02%20PM.png?alt=media&#x26;token=ec266523-a9cf-406b-a98a-90436bfe76f2" alt=""><figcaption></figcaption></figure>

* To edit the collapsible content blocks, simply click on the collapsible content block you want to edit in your sidebar.

**Question**: Set the question into the provided field, for example, "When do I get free shipping?"

**Answer**: Set the answer into the provided field.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/6c12468a-818c-474d-b5a1-e09c86755b3f/Screenshot%202023-11-27%20at%205.01.51%20PM.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
The **Collapsible content** section is not only used for **FAQs** but you can do more, like an **about us** text.
{% endhint %}

### 3. Collapsible content section **settings:**

* Click on the **Collapsible content** section to open the section settings.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FaYyprrRNjABl0Ev48wMI%2FScreenshot%202023-12-23%20at%2010.00.24%20PM.png?alt=media&#x26;token=246cafdd-6755-4114-88eb-67f8a4891ac7" alt=""><figcaption></figcaption></figure>

* **Heading**: Add the needed message/information into the provided fields. Delete the text in this field to remove the heading.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FaAMjsRh31Lh4NdR0Q1Wq%2FScreenshot%202023-12-23%20at%2010.00.31%20PM.png?alt=media&#x26;token=dd94ac0e-b36a-4e1f-b093-d488abd7160e" alt=""><figcaption></figcaption></figure>

* Set the **size** of the heading: choose between **Small**, **Medium**, or **Large.**

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FsfXZnj4i01tc3805zkC0%2FScreenshot%202023-12-23%20at%2010.00.38%20PM.png?alt=media&#x26;token=93ca1ea2-17b5-4397-aa74-e84625228a4c" alt=""><figcaption></figcaption></figure>

* Select the **position** of the heading text: choose between **Center**, **Left**, or **Right**.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FtWaRLavT0y3G6kfqqa3n%2FScreenshot%202023-12-23%20at%2010.02.42%20PM.png?alt=media&#x26;token=fc29d6f6-5c9d-463c-ab6a-3303e0a4e67a" alt=""><figcaption><p><strong>Heading alignment: Center</strong></p></figcaption></figure>

* **Layout & Color scheme**: You can modify the container's color for each collapsible row.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FsoiJy8M79qGO1IWmJuq8%2FScreenshot%202023-12-23%20at%2010.15.01%20PM.png?alt=media&#x26;token=0ec19111-8b91-418c-af9f-c3986f4968a5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you select **No container** for **Layout**, the color will not change. The default color will be Background 1, even if you change the color in the **color scheme** setting.
{% endhint %}
