# Collapsible content

The **Collapsible content** section has expandable rows that reveal more text when clicked. Use this section for Frequently Asked Questions or neatly organize information about your products or store.

* Add **Rows** with a title and expandable text.
* Display an **icon** next to row titles.
* Arrange rows into **groups** with subheadings.

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

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Collapsible content**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr></tbody></table>

### Section button

***

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

## Add collapsible row blocks

***

Click **(+) Add Row** to create multiple collapsible rows. Use the drag-and-drop handles **`⋮⋮`** to re-order row blocks. Click a row block to start adding content.

* Add **Heading** for the row title
* Add **Text** to reveal when row is opened
* Add **Icon** next to the heading

&#x20;

`Click Row block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Show row as already opened with the text revealed.</td><td></td></tr><tr><td><mark style="color:blue;">Icon</mark></td><td>Select from 30+ icons to display next to the row heading.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: None</mark></td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon image to display next the heading. Use PNG files for images with a transparent background. Recommended minimum dimensions of 50px by 50px.</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the row.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Frequently asked question"</mark></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text that's revealed when the row is opened. Use the buttons to make the text bold or italicized, or to add a link.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "This is an example..."</mark></td></tr></tbody></table>

### Change row text style

***

Change the **font** and **size** of the heading and text in the row block.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Row font</mark></td><td>Change the style of the row heading and text. Text styles are based on your theme settings.</td><td><strong>Heading</strong><br><strong>Body</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Row text size</mark></td><td>Change the size of the text.</td><td><p><strong>1-8</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 6</mark></p></td></tr></tbody></table>

## Add group headings

***

Add **Group heading** blocks to arrange multiple collapsible rows into groups.

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

`Click Group heading block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title for groups of collapsible rows.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Group heading"</mark></td></tr></tbody></table>


---

# 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.fluorescent.co/eclipse/sections/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.