# Collapsible row list

The **Collapsible Row List** 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.

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-colors">/pages/CBsbGCpJAMAjEg83Oxwb#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-padding">/pages/CBsbGCpJAMAjEg83Oxwb#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-animations">/pages/CBsbGCpJAMAjEg83Oxwb#section-animations</a></td></tr></tbody></table>

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/cornerstone/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## 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
* Choose to **Expand rows by default**

&#x20;&#x20;

`Click Row block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="564">Description</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></tr><tr><td><mark style="color:blue;">Icon</mark></td><td>Select from 30+ icons to display next to the row heading.</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></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the row.</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></tr><tr><td><mark style="color:blue;">Item heading font</mark></td><td>In the section settings, choose to use the Heading or Body font for the row list text. The heading and body font are set in the Theme settings.</td></tr></tbody></table>

&#x20;

## Change content width

***

&#x20;`Click Collapsible row list section to find settings`

<table><thead><tr><th width="218">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section content at <strong>full width</strong> or use the slider to set a <strong>custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the section: between 400 and 1200 pixels. The section will change in size to fit smaller screen sizes.</td></tr></tbody></table>

## Section header

***

Add a **heading** as the section title and change the **heading size** and **alignment**.

&#x20;

`Click Collapsible row list section to find settings`

<table><thead><tr><th width="214">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add small heading label above main heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading from small (<strong>1</strong>) to large (<strong>8</strong>).</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Header placement</mark></td><td>Change the position of section headings to appear Above content, Left of content, or Right of content.<br><br>On mobile, the header is always above the content.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Multi-column section](/cornerstone/pages/theme-sections/multi-column.md)\
> [Rich text section](/cornerstone/pages/theme-sections/rich-text.md)


---

# 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/cornerstone/pages/theme-sections/collapsible-row-list.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.