# Expanding panels

> A row of tall image panels. One is open at a time, showing its title, text and button; the others wait as slim strips that open with a click or on hover.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/expanding-panels/

## At a glance

- **In the editor:** Expanding panels
- **Where it goes:** Any page template, with Add section
- **In the presets:** Every preset: Landing page
- **Settings:** 27
- **Blocks:** Panel
- **App blocks:** Yes

## When to use it

Expanding panels invite exploration: rooms of a house, categories of a wardrobe, steps of a ritual. Each panel is a teaser that opens into a small story. The Tally, Poster and Petal demo stores use it as *Room by room*, *Wear it your way* and *Little rituals*.

## Set it up

1. Add a **Panel** block for each story – three to six work best.
2. In each panel, upload an **Image** and write the **Title** (shown on the closed strip and as the heading of the open panel), an optional **Label**, **Text** and **Link**.
3. Add a **Button label** to show a button in the open panel.
4. Choose **Panel open at start** – the panel that is open when the page loads.

## How panels behave

- **Open a panel on:** *Click or tap*, or *Hover or click* for a livelier feel on desktop.
- **Closed panels:** *In color*, *Black and white* or *Dimmed* – black and white makes the open panel stand out.
- **Show titles on closed panels:** the title runs along each closed strip.
- **Video:** a panel can play a muted video in the background while it is open, from the start each time it opens. The image shows while it is closed.
- On phones, panels stack vertically; closed ones become slim bands and the open one takes the rest of the height.
- In the editor, selecting a panel block opens that panel.

## Size and look

**Height** (360–800 px, never taller than the screen below the header) and **Height on mobile** set the section's height. **Closed panel width** sets the width of the strips. The **Overlay** (gradient from bottom or left, or solid) keeps the text readable; each panel can override the **Overlay color**. **Text color** is white by default.

> **Tip**
>
> Choose photos with the subject in the centre: closed panels show only a narrow vertical slice of each image.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Expanding panels** (27 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Left |

*Panels*

| Setting | Options | Default |
| --- | --- | --- |
| **Height** – Never taller than the screen below the header. | 360–800px (step 20) | 560px |
| **Height on mobile** | 320–720px (step 20) | 520px |
| **Closed panel width** – On mobile the panels stack and this is their height, at most 72 px. The open panel takes the rest. | 56–200px (step 4) | 120px |
| **Space between panels** | 0–32px (step 2) | 12px |
| **Panel open at start** | 1–8 (step 1) | 1 |
| **Open a panel on** | Click or tap · Hover or click | Click or tap |
| **Closed panels** | In color · Black and white · Dimmed | Black and white |
| **Show titles on closed panels** | Checkbox | On |
| **Panel heading size** | Large · Medium · Small | Medium |

*Overlay*

| Setting | Options | Default |
| --- | --- | --- |
| **Overlay style** | Gradient from bottom · Gradient from left · Solid | Gradient from bottom |
| **Overlay color** | Color | #161616 |
| **Overlay opacity** | 0–90% (step 5) | 40% |
| **Text color** | Color | #FFFFFF |
| **Full width** | Checkbox | Off |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Panel** (10 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Video** – Plays muted in the background while the panel is open, from the start each time it opens. The image shows while the panel is closed. | Video file | – |
| **Title** – Shown on the closed panel and as the heading of the open one. | Text | Sample text |
| **Icon** | None · Box · Tag · Gift · Leaf · Sparkle · Heart · Star · Sun · Moon · Lamp · Truck · Return · Shield · Card · Chat · Globe · Pin · Clock · Ruler | None |
| **Label** | Text | – |
| **Text** | Rich text | Sample text |
| **Link** – The heading links here and gets an arrow. | Link | – |
| **Button label** | Text | – |
| **Button style** | Primary · Secondary · Highlight | Highlight |
| **Overlay color** – Leave empty to use the section's overlay color. | Color | – |

## Related

- [Collection list](https://themelab.page/tally/docs/sections/collection-list.md): Your collections as small tiles, large cards or titles on images, in a grid or carousel – the department tiles of the Tally home page.
- [Image banner](https://themelab.page/tally/docs/sections/image-banner.md): A large photo or video with a heading, text and up to two buttons on top – full width or within the page.