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

<img src="/files/Df06S8FKi74fLPmwmmIh" alt="" width="563">

## Set up section

***

{% hint style="info" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

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

Click the section to change general **section styles**.

<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>Padding and divider</strong></mark></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Animation</strong></mark></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-animations">/pages/nxNcI6zBaofEs4kObMMf#section-animations</a></td><td></td></tr></tbody></table>

&#x20;

## 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><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at <strong>Full width</strong> or use the slider to set a custom width between <code>400 - 1000</code> pixels.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the main content. Click the section to find the header settings

* Add a **heading** and **subheading.**&#x20;
* Change the heading **size** and **alignment**
* To remove the section header, delete any text in these fields

`Click the section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><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 tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td> Set the heading text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</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;">Subheading size</mark></td><td> Set the subheading text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Heading alignment</mark></td><td>Position heading text to the <strong>Left</strong> or <strong>Center</strong> above section content.</td></tr></tbody></table>

***

> **Related links**
>
> [Multi-column section](/stiletto/sections/theme-sections/multi-column.md)\
> [Rich text section](/stiletto/sections/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/stiletto/sections/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.