---
title: "How to Create an Image Accordion in Elementor? (Horizontal & Vertical)"
url: https://theplusaddons.com/docs/create-an-image-accordion-in-elementor/
date: 2024-05-29
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-an-Image-Accordion-in-Elementor_-1024x536.jpg
word_count: 929
---

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

## 

- The Animated Service Boxes widget in The Plus Addons for Elementor Pro creates an image accordion in either Vertical or Horizontal orientation, and Style 1 is the default Image Accordion style.
- Active Slide controls which slide opens on page load, with All Equal keeping every slide closed and the default set to 1.
- Active Slide Width(0-15) sets how far the open slide expands, with a default of 7.5 and a minimum of 1, where all slides stay the same width.
- Image Accordion starts with three items, each using a Featured Image, and optional Button settings add Button Text and Button Link only when the Button switch is turned on.

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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](https://wordpress.org/plugins/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

- Edit the page with Elementor and drag in the **Animated Service Boxes** widget.- 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.- Choose an **Orientation** — **Vertical** (the default, strips side by side) or **Horizontal** (strips stacked).

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

![A vertical image accordion: hovering the third slide opens it and the other two shrink](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-accordion.webp)

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](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Create Sliding Box Effect in Elementor?](https://theplusaddons.com/docs/create-sliding-box-effect-in-elementor/)- [How to Add an Article Box in Elementor?](https://theplusaddons.com/docs/add-an-article-box-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before building an image accordion in Elementor?**
A: The setup depends on Elementor free plus The Plus Addons for Elementor Pro, because the Animated Service Boxes widget ships only in Pro and does not render if Pro is deactivated. The images also need to already be in the Media Library, and each item uses its own Featured Image. That matters because without a Featured Image, Elementor falls back to the grey placeholder, which makes the accordion look unfinished.

**Q: Why does my image accordion not open on hover?**
A: Hover only works when Active Slide Width is above 1. At 1, every slide stays the same width and hovering does nothing, so the accordion behaves like a flat grid instead of an expanding strip layout. The default is 7.5, which gives one slide room to expand while the others stay narrow.

**Q: How do I make one slide open by default instead of starting closed?**
A: Active Slide controls the initial open state. If it is set to All Equal, no slide starts open. Picking a number like 1 opens that slide on page load, which is useful when you want one image to carry the first visual focus instead of showing a fully closed accordion.

**Q: What is the difference between Active Slide and Active Slide Width?**
A: Active Slide chooses which slide opens first, while Active Slide Width controls how much wider that open slide becomes than the closed ones. The page’s default values make this easy to mix up: Active Slide defaults to 1, and Active Slide Width defaults to 7.5. One affects state, the other affects size.

**Q: Can I use an image accordion with horizontal or vertical layouts?**
A: The Animated Service Boxes widget supports both directions. Vertical creates side-by-side strips that open sideways, while Horizontal stacks the strips and opens them downward. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this behavior inside Elementor without needing extra site-wide settings.

**Q: How do I fix text placement inside an image accordion slide?**
A: Content > Layout controls both Text Alignment and Offset, and those are the settings that move text inside each slide. Alignment changes where the text sits across the slide, while Offset shifts it horizontally and vertically. That makes this a layout issue rather than a content issue when text looks misplaced.