# Collapsible content

<div data-full-width="true"><figure><img src="/files/dHaPBf9wiTvRsPXBrcnP" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=foxecom&#x26;utm_medium=help_center_foxify_collapsible_content&#x26;utm_campaign=anchor-text&#x26;utm_term=explore_foxecom_affiliate_program_perks_now">Explore FoxEcom Affiliate program perks now</a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

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

The **Collapsible content** section helps break up longer descriptions and make them more visually appealing.

This comes in handy when you want to show important notice or information without using up too much space.

## Customize a Collapsible content section

A **Collapsible content** section has 2 blocks:&#x20;

* **Section header** and&#x20;
* **Collapsible rows**

### **Section header**

Use this block to give your section a Heading, Text, Button, Image, Icon, or Custom code if needed.&#x20;

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

### Collapsible rows

You can change the **Icon** style for the Collapsible rows: **Plus** or **Arrow.**

<figure><img src="/files/9OKH6oyjDHq2P7ym9BI6" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Plus" %}

<figure><img src="/files/OxIi1cLLdB99SjG1TUVj" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Arrow" %}

<figure><img src="/files/sdGK6s7XaTCUDmvBbfP0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Customize your Collection rows block

You can add or edit a maximum of **only one** type of child block - **Collapsible row** block - to the **Collection rows** block in the **Collapsible content** section.

<figure><img src="/files/2Ui99rErkqZhqdPp0IT0" alt=""><figcaption></figcaption></figure>

If you want the Collapsible row to always open when the page is loaded, enable the **Default open** toggle :white\_check\_mark:

If you enable the **Hide if content is empty** toggle, the **Collapsible row** will be hidden then.

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

Add the suitable text into the **Heading** field, select an attractive **Icon**, and change the **Icon size** to draw the customer's attention.

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

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

Moreover, you can add the extra information in the **Content field**.&#x20;

Add content using **Custom code** (Liquid is accepted, but it only works on the live page).

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


---

# 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://docs.foxecom.com/foxify-app/legacy-editor/sections-and-presets/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.
