---
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-08-06
author: "Aditya Sharma"
description: "Do you want to create an image accordion in WordPress? An image accordion displays multiple images in a compact, interactive format, making it ideal for portfolios, service showcases, and gallery..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Image-Accordion-in-WordPress_-Horizontal-Vertical-1024x519.jpg
word_count: 646
---

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

## Key Takeaways

- Nexter Blocks Animated Service Boxes creates both vertical and horizontal image accordions in the WordPress block editor (Gutenberg).
- Image Accordion uses the Main Style dropdown to make each panel expand and reveal an image with optional text content.
- Orientation offers Vertical for top-to-bottom panels and Horizontal for side-by-side panels, with Slide 0 keeping all panels at equal width by default.
- Service Boxes requires three default items, plus a Featured Image for each panel and an optional Display Button with Button Text and Button Link fields.

Do you want to create an image accordion in WordPress? An image accordion displays multiple images in a compact, interactive format, making it ideal for portfolios, service showcases, and gallery pages. Each panel expands when a visitor interacts with it, letting you pack more visual content without overwhelming the layout.

With the Animated Service Boxes block from [Nexter Blocks](https://nexterwp.com/nexter-blocks/), you can create both vertical and horizontal image accordions in the WordPress block editor (Gutenberg).

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 Nexter Blocks. Make sure it is installed and activated.

[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** dropdown. Use this when you want an interactive gallery where individual panels expand to reveal an image and optional text content.

From the **Style** section, select a predefined visual style for the accordion.

2. From the **Orientation** section, select the direction the accordion panels expand. Select one of the two options:

- **Vertical** – To stack panels top to bottom. Use this for portrait-format layouts, portfolio pages, and sidebar-style displays.

- **Horizontal** – To arrange panels side by side. Use this for wide hero sections or feature highlight rows on landing pages.

Select the option that fits your layout. The steps below use Vertical as an example.

From the **Active Slide** section, set which accordion panel opens when the page loads. Select **Slide 0** to keep all panels at equal width by default. Use this when you want the page to load without any one panel highlighted.

In the **Active Slide Width** field, set how much the active panel expands relative to the others. Values range from 1 to 15. A value of 1 keeps all panels at equal width. A value of 15 sets the active panel to maximum width. Use a higher value when you want the active image to visually dominate the layout.

Enable the **Display Button** toggle to add a call-to-action button to each accordion panel. This is useful when each panel links to a separate product, service, or portfolio entry.

When the button is enabled, select a visual style from the **Button Style** section. For a different way to display grouped content with hover interaction, see [How to open Accordion Tabs on hover in WordPress?](https://nexterwp.com/docs/wordpress-accordion-on-hover/)

3. In the **Service Boxes** section, add the content for each accordion panel. Three items are included by default. Open any item to begin editing it.

In the **Title**, **Sub Title**, and **Description** fields, add the text that appears on each panel when it is active.

4. In the **Featured Image** section, upload or select the background image for that panel. Each panel in the image accordion requires its own image.

In the **Button Text** field, set the label that appears on the button. In the **Button Link** field, enter the URL the button opens.

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

Follow the same process for each of the other accordion panels.

Click the **+Add Item** button to add more panels to the accordion.

From the **Image Size** dropdown, select the image resolution to use for accordion panels. Use a larger image size when displaying full-width horizontal accordions to avoid blurry images on wide screens.

From the **Layout** tab, control the vertical and horizontal alignment of the text within each panel, and set the overall accordion height. Use this tab to ensure the accordion fits consistently within your page layout.

The vertical image accordion is now visible on your page. For a different multi-panel interactive layout, see [How to create multiple columned WordPress Carousel Slider?](https://nexterwp.com/docs/multiple-columned-wordpress-carousel-slider/)

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