# Collapsible row tabs

{% columns %}
{% column width="58.333333333333336%" %}
The **Collapsible row tabs** 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.

<figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FVjv0J3KNSwdu0Yswc1Dv%2Fcollapsible-row-tabs-1A.png?alt=media&#x26;token=2236d1e2-f1a8-4fae-9c41-4b0aae9abb06" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FPc561BCF4QVe5t6pYdSV%2Fcollapsible-row-tabs-1B.png?alt=media&#x26;token=9072df06-b88d-41e8-bc72-8da10bd4cbf7" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Key features**

* Group rows
* Custom row toggles
* Optional sticky tabs
  {% endhint %}

{% hint style="info" %}
**Blocks**

Tab header\
Collapsible rows
{% endhint %}

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Add rows and tab headers</h2>

***

Click **(+) Add block** to add **collapsible rows** and **tab headers.** Use the drag handles **`⋮⋮`** to re-order blocks.

### <mark style="color:$primary;">Tab headers</mark>

To create groups of rows, add **Tab headers** and arrange collapsible row blocks under each tab header. Tab header text will appear as navigation links in the column next to the rows.

<sub><mark style="color:$info;">Click Tab header block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Header</mark></td><td valign="top">Add text for header of row group.</td></tr></tbody></table>

### <mark style="color:$primary;">Collapsible rows</mark>

Add collapsible rows with headers that reveal text when clicked. You can display text content in 1 or 2 columns.

<sub><mark style="color:$info;">Click Collapsible row block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Content columns</mark></td><td valign="top">Display text content 1 or 2 columns.</td></tr><tr><td valign="top"><mark style="color:blue;">Header</mark></td><td valign="top">Add text for the row title.</td></tr><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add text that's revealed when the row is opened.</td></tr></tbody></table>

<h2 align="center">Customize tabs</h2>

***

The **Tabs** allow visitors to jump to different row groups. They appear in the left or right column, opposite the rows.&#x20;

### <mark style="color:$primary;">Tabs style</mark>

You can change the placement, font, and styles for active and inactive tabs.

<sub><mark style="color:$info;">Click section find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Placement</mark></td><td valign="top"><mark style="color:$info;">Left / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Body</mark><br><mark style="color:$info;">Heading</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Sticky tabs</mark>

Enable sticky tabs to fix tabs to the top of the window when scrolling down to view the collapsible row tabs. The **Active tab indicator** shows the current tab in view.

If the sticky tabs appear misaligned or are hidden under other sticky elements (e.g. Header, Announcements), you can toggle on **Advanced sticky settings** to adjust the alignment of the tabs when sticky.

<details>

<summary><mark style="color:$primary;">Advanced: Adjust vertical alignment when sticky</mark></summary>

You can use the **Advanced sticky settings** and increase the **Vertical offset** to increase the distance between the top of the window and the tab headers.

Use the sliders to adjust the number of pixels to offset the sticky alignment for Desktop, Tablet, and Mobile.

*Recommended*: Open a live preview of your store to see accurate results of the vertical offset. The theme editor may not accurately show the offset as it appears on your live site.

</details>

<sub><mark style="color:$info;">Click section find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Sticky tabs</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Active tab indicator</mark></td><td valign="top"><mark style="color:$info;">Dot beside</mark><br><mark style="color:$info;">Line below</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Dim inactive tabs</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Advanced sticky settings</mark></td><td valign="top">Reveal settings to adjust the alignment of the sticky and scroll position.</td></tr><tr><td valign="top"><mark style="color:blue;">Vertical offset</mark></td><td valign="top">Applies to both the sticky tabs and the scroll positioning. Advanced scroll positioning is best tested outside the theme editor.</td></tr><tr><td valign="top"><mark style="color:blue;">Custom CSS variable</mark></td><td valign="top">Apply complex offset values by providing a valid CSS variable (eg. <code>--my-custom-variable</code>).</td></tr></tbody></table>

<h2 align="center">Customize rows and groups</h2>

***

Adjust the layout and styles for **Rows and Row groups.**

### <mark style="color:$primary;">Row groups</mark>

<sub><mark style="color:$info;">Click section find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Header font</mark></td><td valign="top"><mark style="color:$info;">Body</mark><br><mark style="color:$info;">Heading</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Header size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Vertical spacing</mark></td><td valign="top"><mark style="color:$info;">1 - 20</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Rows</mark>

<sub><mark style="color:$info;">Click section find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Header size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Row padding</mark></td><td valign="top"><mark style="color:$info;">1 - 8</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Row style</mark></td><td valign="top"><mark style="color:$info;">Filled</mark><br><mark style="color:$info;">Dividers</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space between rows</mark></td><td valign="top"><mark style="color:$info;">1 - 8</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Match section</mark><br><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Dropshadow</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

### <mark style="color:$primary;">Row toggles</mark>

<sub><mark style="color:$info;">Click section find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Placement</mark></td><td valign="top"><mark style="color:$info;">Left / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Plus open, x close</mark><br><mark style="color:$info;">Plus open, minus close</mark><br><mark style="color:$info;">Caret</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icons</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Icon size</mark></td><td valign="top"><mark style="color:$info;">Dot beside</mark><br><mark style="color:$info;">Line below</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Icon frame</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">Circle</mark><br><mark style="color:$info;">Square</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top">Applies to default icons only.</td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-view="cards"><thead><tr><th align="center"></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center"><strong>Full width</strong></td><td>Section background and content span the screen's full width.</td><td data-object-fit="contain"><a href="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FkJ6rUO7TGNJRIE1AcexA%2Ffull-width.png?alt=media&#x26;token=bcf5796e-3931-4689-ac34-795584378cbe">full-width.png</a></td></tr><tr><td align="center"><strong>Full width padded</strong></td><td>Section spans the screen's full width with some padding.</td><td data-object-fit="contain"><a href="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FH0YFSR5SvPbacTJwRfix%2Ffull-width-padded.png?alt=media&#x26;token=7abbf792-228d-4808-808d-afb6d569aec6">full-width-padded.png</a></td></tr><tr><td align="center"><strong>Page width</strong></td><td>Section background and content span the page width.</td><td data-object-fit="contain"><a href="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FKskyrvuQ2oTj7tsqqggV%2Fpage-width.png?alt=media&#x26;token=2bf5b977-36e7-497d-964b-639016795812">page-width.png</a></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Border</mark></a></td><td><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2F23lEbj12B7JjIYHHRADj%2Fsection-padding-setting.png?alt=media&#x26;token=6365d5c7-3c9d-4c40-93e0-f16b8cc6d4b9" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FU1IrPgwZ9dlrnr9cNzSm%2Fsection-padding.png?alt=media&#x26;token=42dec7c8-59b2-4b2c-9741-75dfe0b4c7b4" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)