Image Accordion

4 min readUpdated 7 August 2026

Pair a set of photos with expandable text: click a heading and the picture beside it changes to match. It's the fifth element in the Advanced Content family.

What your visitors see

The element splits in two: a large image on one side, and a stacked list of headings on the other. The first item is already open when the page loads.

Click any heading and three things happen together: that item's text slides open, whichever item was open closes, and the big image gently cross-fades to that item's photo. The + beside the heading turns into a ×.

It's ideal for anywhere each block of text has a matching picture: an 'Our Story / Our Process / Our Team / Our Results' section, a step-by-step walkthrough, service breakdowns, or introducing departments.

Adding it

1In the editor, open Add Elements and choose Image Accordion from the Advanced Content section.
2Drop it on your page. It arrives with four example items and placeholder photos.
3Hover the element and click the pencil icon to open the panel.

Adding your own content

On the Items tab, click any item to open it:

Title: the clickable heading
Description: the text that opens beneath it (leave a blank line to start a new paragraph)
Image: click the thumbnail beside the item, or the pencil button, to choose a picture

Click Add new to add another item, drag the grip handle to reorder, and use the bin icon to remove one.

You can also click the titles and text directly on the page to edit them there, which gives you the full formatting toolbar and the AI rewrite option.

Settings

General

Title alignment: Left, Centre or Right
Description alignment: Left, Centre or Right
Heading type: H1 to H6, H3 by default
Image side: put the picture on the Left or the Right

Styles

Use the Desktop / Mobile buttons at the top to switch device.

Colours are shared across devices, so they're editable on Desktop:

Separator colour: the dividing lines between headings
Title colour: also colours the + and × symbols
Body text colour

Typography. Set Title font size (px) and Body text size (px) separately for desktop and mobile.

On phones

The two halves stack, with the image on top and the headings below it, so the Image side setting only applies on larger screens. The image becomes a fixed-height banner and everything else works exactly the same: tap a heading, and the picture above changes.

Tips for great results

Three to six items works best. The text column grows with every item you add, while the image column stays put, so a very long list leaves the picture looking short beside it.
Upload square-ish images, at least 1000 pixels wide. Every picture is cropped to a square from the centre, so keep your subject in the middle. Tall portraits and wide panoramas lose a lot at the edges.
Give every item a photo, or none of them. An item without one shows a plain grey panel, so a single missing image is very noticeable.
Put your most important item first. It's the one that's open when the page loads, and that can't be changed.
Keep descriptions to a short paragraph. Very long text makes the text side much taller than the picture beside it.
Photos here don't carry alternative text, so don't rely on an image alone to convey something important; make sure it's in the title or description too. See Alt text on photos.

Was this helpful?

Last updated: 7 August 2026

Advanced Content Elements

Organise information with four separate elements: Accordion, Tabs, List and Definition List. Add and style items, and turn on FAQ schema to earn rich results in Google.

6 min read