> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/pages/theme-sections/collapsible-row-list.md).

# 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**

`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>

## Change content width

***

`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**.

`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>

\\

***

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