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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-7f1e6f89a3bdd889ff5b7e9e11ab5430696aa0c3%2Fcollapsible-row-list.jpeg?alt=media)

## 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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="../using-sections#section-padding">#section-padding</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Animation</strong></mark></td><td><a href="../using-sections#section-animations">#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](https://help.fluorescent.co/stiletto/sections/theme-sections/multi-column)\
> [Rich text section](https://help.fluorescent.co/stiletto/sections/theme-sections/rich-text)