# Collapsible content

This section is typically used on FAQ pages to answer common questions, but it can also be used for any structured information that benefits from a collapsible format. By organizing information into expandable rows, this section provides a clean, user-friendly way to present detailed information without overwhelming customers.

<figure><img src="/files/PiZsS0FpZ7DW3Dd4EvIT" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collapsible content** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/npRb7aPPm7pi92KZRNTn" alt=""><figcaption></figcaption></figure>

### **2, Section settings:**

The **Section settings** control the heading position, column layout, style, and color application.

* **Heading position**: Adjust the layout and placement of the heading in relation to the collapsible rows:

{% tabs %}
{% tab title="Top" %}
The heading appears above the collapsible rows.
{% endtab %}

{% tab title="Left" %}
The heading appears on the left side, and the collapsible rows are on the right.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Note**: *On mobile, the heading always appears above the collapsible rows for optimal display.*
{% endhint %}

* **Number of columns on desktop**: Adjust the number of columns for FAQ items on desktop:

{% tabs %}
{% tab title="1 column" %}
All collapsible rows are arranged in a single column.
{% endtab %}

{% tab title="2 columns" %}
Collapsible rows are displayed in two columns, with odd-numbered rows on the left and even-numbered rows on the right.
{% endtab %}
{% endtabs %}

* **Style**: Define the style of the section content:

{% tabs %}
{% tab title="Blank" %}
No specific style is applied to the content.
{% endtab %}

{% tab title="List" %}
Numbers appear before each question in the collapsible rows.
{% endtab %}

{% tab title="Icons" %}
Icons appear before each question in the collapsible rows.
{% endtab %}
{% endtabs %}

* **Secondary background**: Determine how the **Color scheme** is applied within the section: **None**: When the color scheme changes, both the section background and the background of the collapsible rows change together. **Show as row background**: Only the background of the collapsible rows changes with the color scheme, while the section background remains unchanged.

### 3, Block settings:

The Collapsible content section includes two primary blocks: the Heading block and the Collapsible row block.

* **Heading block:**

> - Enter text for the heading and description to introduce the content. Adjust the alignment of content to **Left**, **Center**, or **Right**.
> - Add a button below the heading and description to guide customers to other parts of your store. You can choose the button style as **Solid**, **Outline**, or **Text**.
> - Adjust the alignment of content on mobile to **Left**, **Center**, or **Right** for optimal display.

* **Collapsible row block**

> - **Heading**: Enter a question for the FAQ or collapsible row title. If left blank, the block will not be visible.
> - **Row content**: Add the answer or content for the row. When the row is expanded (caret icon pointing up), the answer appears below the question. When collapsed (caret icon pointing down), the answer is hidden.
> - You can pull content from a page in your store by selecting **Tab content from page** and choosing a page. If used, the page content will override any text entered manually in the **Row content** field.
> - **Icon**: Choose an icon from A Theme’s icon list to display at the start of each question, enhancing the visual structure of the rows.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/collapsible-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.