---
title: "How to Create an Expandable Service Box in WordPress?"
url: https://nexterwp.com/docs/how-to-create-an-expandable-service-box-in-wordpress/
date: 2024-12-12
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Six services described in full is a wall of text; six headings with one open is a menu. Services Element keeps the list compact and expands whichever item the reader..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Expandable-Service-Box-in-WordPress_-1024x519.jpg
word_count: 363
---

# How to Create an Expandable Service Box in WordPress?

## Key Takeaways

- Animated Service Boxes en Nexter Blocks Pro se activa en Nexter > Blocks y usa Services Element para mantener la lista compacta con un solo elemento abierto a la vez.
- Style 1 es la versión expansiva: cada elemento lleva icono, título, subtítulo y descripción, y no usa imágenes ni elementos ni imágenes de fondo.
- Style 2 mantiene todos los elementos abiertos; si las descripciones tienen longitudes muy distintas, la sección salta de altura al abrirse y cerrarse.

Six services described in full is a wall of text; six headings with one open is a menu.

Services Element keeps the list compact and expands whichever item the reader chooses.

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

![Published expandable service boxes with their descriptions visible](https://nexterwp.com/wp-content/uploads/2026/09/asb-fe-services.webp)

## Steps

- Add the **Animated Service Boxes** block and click **Design from Scratch**.

- Set **Main Style** to **Services Element**.

![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.

- Set **Style** to **Style 1** for the expanding behaviour.

![The Style setting](https://nexterwp.com/wp-content/uploads/2026/09/asb-services.webp)

- Write a short description for each item — it is what appears when the item opens.

- Publish.

> ***Style 2 keeps every item open.** If you want them all visible at once, that is the one to choose; Style 1 is the expanding version.*

## How It Behaves

- **This layout uses no images at all.** Measured: no `<img>` elements and no background images — it is built from icons and text.- One item is open at a time, which is what keeps the section short.- Each item takes an icon, a title, a subtitle and a description.- Because there is no image, it stays light and works well low down a long page.

## Limitations

- **Pro only.**- **No images.** If you want a picture per service, use " + a(ARTICLE_DOC, "Article Box") + " instead.- Only one item is open at a time in Style 1, so readers cannot compare two side by side.- Long descriptions make the section jump in height as items open and close.

## Troubleshooting

### My images do not appear

This layout does not use images. Choose a different Main Style if you need them.

### Everything is open at once

You are on **Style 2**, which shows all items. Switch to Style 1.

### The page jumps as items open

The descriptions are very different lengths. Even them out.

## Related Docs

- [Article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/)- [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/)- [Image accordion](https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/)

## Frequently Asked Questions

**Q: What do I need before creating an expandable service box in WordPress?**
A: The setup is built on Nexter Blocks Pro, and the Animated Service Boxes block has to be enabled under Nexter > Blocks in your WordPress dashboard. Each service item needs a title, subtitle, description, and an icon or image plus a link. That structure matters because the layout is designed to keep six services compact instead of turning into a wall of text.

**Q: How do I make only one service item open at a time?**
A: Style 1 is the expanding version, and it keeps one item open at a time. That is useful when you want the section to stay short and force attention onto a single service instead of showing everything at once. If you want all items visible together, Style 2 is the opposite choice because it keeps every item open.

**Q: Why are my images not showing in the expandable service box?**
A: This layout does not use images at all. It is built from icons and text, with no img elements and no background images. If you need a picture per service, switch to a different Main Style such as [Article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/). That is the cleanest fix when you expected visual thumbnails.

**Q: What is the best way to avoid the page jumping when service items open?**
A: Keep the descriptions close in length. The page jumps because long descriptions change the height of the section as items open and close, so uneven copy makes the movement more noticeable. Shorter, balanced descriptions keep the Services Element steadier on long pages where it sits low in the layout.

**Q: Can I show all service items open at once?**
A: Style 2 is built for that exact behavior. It keeps every item open, which works when readers need to compare services side by side instead of clicking through one at a time. Style 1 is better when you want a compact section, while Style 2 trades that compactness for full visibility.

**Q: Is there another block to use if I want images with each service?**
A: The Article Box is the better fit when each service needs its own picture. The expandable Services Element in Nexter Blocks Pro does not support images, so it stays lightweight and text-driven. For layouts and variations, the [Animated Service Boxes block guide](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/) and [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/) are the relevant references.