Skip to content

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

Updated On : September 27, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Animated Service Boxes en Nexter Blocks Pro muestra una Image Accordion con cuatro o cinco imágenes y usa un panel por imagen, con título, subtítulo, descripción y un enlace.
  • Nexter > Blocks activa Animated Service Boxes en el escritorio de WordPress, y el ajuste Main Style cambia a Image Accordion para elegir orientación vertical u horizontal.
  • Active Slide define qué panel aparece abierto antes del hover, mientras que el comportamiento real abre un panel al pasar el mouse y usa cuatro elementos con texto alternativo propio.
Table of Contents

An image accordion shows four or five pictures at once and gives the whole of one to whoever is looking at it.

It is the Image Accordion layout of the Animated Service Boxes block, and it runs either across the page or down it.

For every Animated Service Boxes setting in one place, see the Animated Service Boxes block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — the Animated Service Boxes block is part of Nexter Blocks Pro.
  • Block to enable: Animated Service Boxes, switched on under Nexter > Blocks in your WordPress dashboard.
  • Your items decided: each one takes a title, a subtitle, a description, an icon or image and a link.
  • One image per panel, all the same shape.
An image accordion with three panels open on a published page

Steps

  1. Add the Animated Service Boxes block and click Design from Scratch.
  1. Set Main Style to Image Accordion.
The Main Style setting with all eight layouts
  1. Fill in your items — title, subtitle, description, and an image or icon for each.
  1. Choose the Orientation — vertical panels across the page, or horizontal ones stacked down it.
The Orientation setting
  1. Set Active Slide to decide which panel is open before anyone hovers.
The Active Slide setting
  1. Publish and move the mouse across the panels.

How It Behaves

  • Real images, not backgrounds. Measured: four <img> elements, so each panel’s picture carries its own alt text.
  • Hover opens a panel. With nothing hovered there was no active panel; hovering the second one made exactly one active.
  • Orientation writes a class — accordion-vertical by default and accordion-horizontal when switched.
  • Active Slide Width controls how much room the open panel takes from the others.

Limitations

  • Pro only.
  • Images of different shapes make the panels jump. Crop them all to the same ratio.
  • Four or five panels is the practical limit; beyond that each closed panel is too narrow to read.
  • There is no hover on a touch screen, so check how this looks on a phone before relying on it.

Troubleshooting

The panels do not open

The accordion opens on hover. On a touch screen there is nothing to hover.

One panel is open before I hover anything

That is Active Slide. Change which one, or set it to the first.

The panels are different heights

The images are different shapes. Crop them to a single ratio.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why do the panels not open on a phone or tablet?

The accordion opens on hover, so touch screens have nothing to trigger. That is the main gotcha with this layout in Nexter Blocks Pro. If you are planning to use the Image Accordion on mobile, test it there first instead of assuming it will behave like desktop hover. The page also notes that there is no hover on a touch screen, which makes this a poor fit for tap-only interactions.

What do I need before creating an image accordion in WordPress?

The Image Accordion layout is part of the Animated Service Boxes block in Nexter Blocks Pro, so the block must be enabled under Nexter > Blocks in your WordPress dashboard. Each panel needs its own title, subtitle, description, and an image or icon, plus one link. The page also says one image goes in each panel and all images should share the same shape to avoid layout jumps.

Should I use a horizontal or vertical image accordion?

Orientation changes how the panels stack: vertical panels run across the page, while horizontal panels are stacked down it. That choice matters because it changes how much reading space each closed panel gets. The page also says Orientation writes a class, accordion-vertical by default and accordion-horizontal when switched, so the layout is not just visual but structural too.

Why does one panel open before I hover anything?

That behavior comes from Active Slide. It decides which panel is already open before any hover happens, so if one panel is expanded on load, that setting is doing it. The practical fix is to change which slide is active or set it to the first one. This is useful when you want a specific image or message to be visible immediately instead of waiting for interaction.

How many panels should an image accordion have?

Four or five panels is the practical limit. Beyond that, each closed panel becomes too narrow to read, which hurts both usability and scanability. The page also says the accordion shows four or five pictures at once, so that range matches how the layout is meant to breathe on screen. If you need more items, a different block pattern may be easier to read.

Why do the panels end up different heights?

Different image shapes cause the panels to jump in height. The page calls this out directly and recommends cropping all images to a single ratio. That matters because this layout uses real images, not backgrounds, so inconsistent source dimensions show up immediately in the accordion. Keeping every image the same shape makes the row or column feel stable instead of uneven.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53