How to Create an Image Accordion in Elementor? (Horizontal & Vertical)

An image accordion shows several images side by side as narrow strips, and opens the one you hover so its picture and text get the space.

The Animated Service Boxes widget builds it in either direction — a row of vertical strips, or a stack of horizontal ones — and lets you decide how wide the open slide gets.

Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Pro — Animated Service Boxes ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.
• Prerequisite: Elementor (free) installed and active.
• Widget to enable: go to The Plus Addons > Widgets, search for Animated Service Boxes and turn its toggle on.
• Prerequisite: the images you want to show, already in the Media Library. Every item has its own Featured Image; with none set, Elementor’s grey placeholder is used.
• Nothing else to switch on: no extension and no site-wide setting is needed for this widget.

Build the accordion

1. Edit the page with Elementor and drag in the Animated Service Boxes widget.
2. In Content > Animated Service Boxes, set Main Style to Image Accordion. A Style picker appears with two pictures, Style 1 and Style 2; Style 1 is the default.
3. Choose an Orientation — Vertical (the default, strips side by side) or Horizontal (strips stacked).

4. Set Active Slide to the slide that should be open when the page loads. The first option is All Equal, then 1 to 20; the default is 1. With All Equal no slide starts open.
5. Use Active Slide Width(0-15) to set how far the open slide expands. The default, 7.5, gives the open slide 7.5 times the width of a closed one — we measured 884 px against 118 px in a 1120 px row. Set it to 1 and every slide stays the same width.
6. Open the Animated Service Boxes list. It starts with three items. In each one set the Featured Image, and a Title, Sub Title and Description if you want text over the picture.
7. Optional: turn Button on to give every slide a button, then pick a Button Style and fill in each item’s Button Text and Button Link. Without the switch those two fields do nothing.

Use + Add Item for more slides, and Content > Layout to set the accordion’s Height, its Text Alignment and the Offset of the text inside each slide.

The two settings people mix up

Setting	What it does	Default
Active Slide	Which slide is open when the page loads. All Equal means none.	1
Active Slide Width(0-15)	How much wider the open slide is than a closed one. Minimum 1, maximum 15, in steps of 0.5.	7.5
Orientation	Vertical opens a slide sideways; Horizontal opens it downwards.	Vertical

How It Behaves

• Hover moves the open slide. With the defaults, slide 1 starts open at 884 px while slides 2 and 3 are 118 px. Hovering slide 3 flips that to 118 / 118 / 884 and slide 3 becomes the open one. Heights stay the same.
• Horizontal works the same way in the other axis. With Orientation on Horizontal, the three slides measured 474 px, 63 px and 63 px tall, and hovering the third made it 63 / 63 / 474.
• Width 1 switches the accordion off. With Active Slide Width(0-15) at 1, all three slides sat at 373 px and hovering did not change a single width. Use that only if you want a plain equal grid.
• All Equal starts closed. With Active Slide on All Equal, no slide carried the open state on load and all three were 373 px.

Limitations

• Active Slide Width(0-15) cannot actually be set to 0. The label says 0-15 but the field’s minimum is 1. At 1 every slide is the same width and hovering no longer opens one.
• Image Accordion and Portfolio have no Columns Manage section. Their item count per row is fixed by the layout, so there is nothing to set for desktop, tablet or mobile.
• The Image/Icon switch is not available here. Image Accordion and Sliding Boxes are the two layouts where an item cannot carry an icon or a Lottie file; only the Featured Image is used.

Not verified

So you know exactly what has and has not been checked:

• Style 2. Only the default Style 1 was checked on the front end for this layout.
• Image Resolution. Only the default Full was used; no other size was measured.
• Button Style 2 and Style 3. Only the default Style 1 button was rendered.
• The Style tab. No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.
• Responsive behaviour. Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.

Troubleshooting

No slide opens when I hover

Check Active Slide Width(0-15). At 1 every slide is locked to the same width and hovering does nothing. Raise it — the default is 7.5.

The slides start closed and I wanted one open

Active Slide is on All Equal. Pick a number instead; 1 opens the first slide.

I cannot find Columns Manage

This layout does not have one. The slide count per row is the accordion itself, so there is nothing to set per device.

The text is in the wrong place inside a slide

Content > Layout holds Text Alignment and Offset, which move the text horizontally and vertically inside each slide.

Related Docs

• Animated Service Boxes Widget: Settings Overview
• How to Create Sliding Box Effect in Elementor?
• How to Add an Article Box in Elementor?