--- 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-09-15 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Image-Accordion-in-WordPress_-Horizontal-Vertical-1024x519.jpg word_count: 371 --- # How to Create an Image Accordion in WordPress? (Horizontal & Vertical) ## 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. 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](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/) ## 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. ## Steps - Add the **Animated Service Boxes** block and click **Design from Scratch**. - Set **Main Style** to **Image Accordion**. ![The Main Style setting with all eight layouts](https://nexterwp.com/wp-content/uploads/2026/09/asb-main-style.webp) - Fill in your items — title, subtitle, description, and an image or icon for each. - Choose the **Orientation** — vertical panels across the page, or horizontal ones stacked down it. ![The Orientation setting](https://nexterwp.com/wp-content/uploads/2026/09/asb-accordion.webp) - Set **Active Slide** to decide which panel is open before anyone hovers. ![The Active Slide setting](https://nexterwp.com/wp-content/uploads/2026/09/asb-active.webp) - Publish and move the mouse across the panels. ## How It Behaves - **Real images, not backgrounds.** Measured: four `` 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 - [Sliding box effect](https://nexterwp.com/docs/create-sliding-box-effect-in-wordpress/)- [Portfolio section](https://nexterwp.com/docs/create-a-unique-portfolio-section-in-wordpress/)- [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/) ## Frequently Asked Questions **Q: Why do the panels not open on a phone or tablet?** A: 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. **Q: What do I need before creating an image accordion in WordPress?** A: 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. **Q: Should I use a horizontal or vertical image accordion?** A: 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. **Q: Why does one panel open before I hover anything?** A: 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. **Q: How many panels should an image accordion have?** A: 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. **Q: Why do the panels end up different heights?** A: 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.