---
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-04-09
author: "Aditya Sharma"
description: "Do you want to create an image accordion in Elementor? Image accordion allows you to display multiple images in a compact and organized manner, making it perfect for showcasing a..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-an-Image-Accordion-in-Elementor_-1024x536.jpg
word_count: 499
---

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

## Key Takeaways

- The Plus Addons for Elementor Animated Service Boxes widget allows users to create vertical and horizontal image accordions.
- Users can set the active slide width from 1 to 15, affecting how much the active slide opens in the accordion.
- The widget enables the addition of a button to the image accordion, with customizable button text and URL options.

Do you want to create an image accordion in Elementor? Image accordion allows you to display multiple images in a compact and organized manner, making it perfect for showcasing a gallery or portfolio. The accordion effect adds a touch of creativity to your website, making it more visually appealing and engaging for visitors.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily create vertical and horizontal image accordions in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, [click here](https://theplusaddons.com/docs//animated-service-boxes-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/)

To do this, add the Animated Service Boxes widget to a page and follow the steps -

1. Select **Image Accordion** from the **Main Style** dropdown.

Then from the **Style** section, you can select a predefined style.

2. From the **Orientation** dropdown, you have to select the image accordion orientation. Here you’ll find two options -

- **Vertical** - To create a vertical image accordion.

- **Horizontal** - To create a horizontal image accordion.

Select the option as per your requirement, let’s select Vertical here.

Then from the **Active Slide** section, you can select a particular slide to be active by default or make all the slides equal.

In the **Active Slide Width(0-15)** field, you can set the active slide width i.e. how much the active slide will open. You can set the value from 1 to 15, where 1 will make all the slide's widths equal and 15 will set the maximum width for the active slide.

You can select the image size from the **Image Resolution** dropdown.

By enabling the **Button** toggle you can add a button to the image accordion.

When enabled you can select a button style from the **Button Style** dropdown.

3. Then in the **Animated Service Boxes** section, you have to add the content for the image accordion. By default, you’ll find three items, open one item.

You can add a title, subtitle and description in the **Title**, **Sub Title** and **Description **fields if required.

4. Then in the **Featured Image** section, you have to add an image for the accordion.

You can edit the button text and URL from the **Button Text** and **Button Link **fields respectively.

> *Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.*

Following this process you can edit the other items.

You can click on the **+Add Item** button to add more accordion items.

Then from the **Layout** tab, you can manage the vertical and horizontal alignment of the text content of the image accordion, you can also manage the image accordion height as well.

Now you’ll see a beautiful vertical image accordion.

> *Note: Similarly you can create a horizontal image accordion by selecting ****Horizontal**** from the ****Orientation**** dropdown.*

***Suggested Reading***: *[How to Create Sliding Box Effect in Elementor?](https://theplusaddons.com/docs//create-sliding-box-effect-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if my image accordion is not displaying correctly?**
A: Check that the Animated Service Boxes widget from The Plus Addons for Elementor is installed and activated. If the widget isn't active, the image accordion won't function as expected. Additionally, ensure that you've selected the correct orientation and added images to the accordion items. If issues persist, revisiting the settings or re-adding the widget may resolve the problem.

**Q: Can I use the image accordion to showcase a portfolio?**
A: The image accordion is ideal for showcasing galleries or portfolios, as it allows for multiple images to be displayed in a compact format. This organized approach not only enhances visual appeal but also engages visitors effectively. Utilizing the Animated Service Boxes widget from The Plus Addons for Elementor will help create a dynamic presentation of your portfolio.

**Q: What is the best practice for setting the Active Slide Width in an image accordion?**
A: Setting the Active Slide Width between 1 and 15 is crucial for determining how much the active slide will open. A value of 1 makes all slides equal in width, while a value of 15 maximizes the active slide's width. For a balanced look, consider using a mid-range value, which maintains visual harmony while highlighting the selected image.

**Q: How do I add more items to my image accordion?**
A: You can easily add more items to your image accordion by clicking the +Add Item button in the Animated Service Boxes section. This feature allows for expansion of the accordion to include additional images and content, making it versatile for various display needs. Remember to fill in the title, subtitle, and description fields for each new item to enhance user engagement.

**Q: What happens if I forget to enable the Button toggle for my image accordion?**
A: If the Button toggle is not enabled, the Button Text and Button Link fields will not function, meaning users won't see a button associated with the accordion items. This could limit interactivity and engagement, especially if you intend to guide visitors to additional content or links. Always ensure the toggle is enabled when you want to include a button.

**Q: Does the image accordion work with other page builders like Gutenberg or Divi?**
A: The image accordion feature is exclusive to The Plus Addons for Elementor and only works with Elementor. It does not support other page builders such as Gutenberg, Beaver Builder, or Divi. If you're using a different builder, you'll need to switch to Elementor to utilize this functionality effectively.