---
title: "How to Create an Image Accordion in WordPress? (Horizontal & Vertical)"
url: https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to create an image accordion in WordPress? An image accordion allows you to display multiple images in a compact, organized way, making it ideal for showcasing galleries..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Image-Accordion-in-WordPress_-Horizontal-Vertical-1024x519.jpg
word_count: 482
---

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

## Key Takeaways

- Nexter Blocks includes the Animated Service Boxes block, which allows users to create vertical and horizontal image accordions in WordPress.
- Users can set the active slide width for the image accordion between 1 and 15, affecting how much the active slide opens.
- The Display Button toggle in the Animated Service Boxes block enables users to add a button to the image accordion with customizable text and URL.

Do you want to create an image accordion in WordPress? An image accordion allows you to display multiple images in a compact, organized way, making it ideal for showcasing galleries or portfolios. The accordion effect adds a creative touch to your website, enhancing its visual appeal and keeping visitors engaged.

With the Animated Service Boxes block from Nexter Blocks, you can easily create vertical and horizontal image accordions in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Animated Service Boxes block,* *[click here](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/)

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

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

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

2. From the **Orientation** section, 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 by selecting Slide 0.

In the **Active Slide Width(0-15)** section, 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.

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

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

3. Then in the **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 as 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 Display Button toggle is enabled to see the Button Text and Button Link fields.*

Following this process, you can edit the other items.

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

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

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

## Frequently Asked Questions

**Q: What should I do if my image accordion is not displaying correctly?**
A: If your image accordion isn't displaying correctly, first ensure that the Animated Service Boxes block from Nexter Blocks is installed and activated. This block is essential for creating the accordion. Additionally, check that you've selected the correct orientation (vertical or horizontal) and that your images are properly uploaded in the Featured Image section.

**Q: Can I use the image accordion for a portfolio showcase?**
A: An image accordion is ideal for showcasing galleries or portfolios, as it allows you to display multiple images in a compact and organized manner. Using the Animated Service Boxes block from Nexter Blocks, you can create both vertical and horizontal layouts, making it flexible for various presentation styles.

**Q: What is the best way to set the active slide width in my image accordion?**
A: Setting the active slide width is crucial for visual impact. You can adjust the width from 1 to 15 in the Active Slide Width(0-15) section. A setting of 1 makes all slides equal, while 15 maximizes the active slide's width. Choose a value based on how much emphasis you want to place on the active image.

**Q: How do I add more items to my image accordion?**
A: To add more items to your image accordion, click the +Add Item button within the Service Boxes section. This allows you to include additional images and content, enhancing your accordion's functionality and visual appeal. Remember to fill in the Title, Subtitle, and Description fields for each new item.

**Q: Are there any limitations when using the Animated Service Boxes block?**
A: The Animated Service Boxes block is designed specifically for use with Gutenberg and does not function as a standalone theme. Ensure you are using Gutenberg as your primary builder. Additionally, while it supports both vertical and horizontal orientations, the design options may be limited to the styles provided within the block.