---
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-03-31
author: "Aditya Sharma"
description: "Do you want to add expandable service boxes to showcase information? These boxes are a great way to present multiple services or products in a compact, organized layout, allowing users..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Expandable-Service-Box-in-WordPress_-1024x519.jpg
word_count: 415
---

# How to Create an Expandable Service Box in WordPress?

## Key Takeaways

- Utilizes the Animated Service Boxes block from Nexter Blocks to create expandable service boxes in WordPress.
- Enables the Display Button toggle to add buttons and customize button styles for hover sections.
- Manages item display across devices using the Columns Manage tab for responsive layouts.

Do you want to add expandable service boxes to showcase information? These boxes are a great way to present multiple services or products in a compact, organized layout, allowing users to click and expand for more details, enhancing both functionality and design.

With the Animated Service Boxes block from Nexter Blocks, you can easily create expandable service boxes 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 **Services Element** from the **Main Style** section.

2. Then select the **Style 1** from the **Style** section.

> *Note: With Style 2 all items will always be visible.*

You can add a button to the hover sections by enabling the **Display** **Button** toggle.

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

Then by enabling the **Image/Icon** toggle, you can add different image types to the service boxes.

2. In the **Service Boxes** section, you have to add the content for the hover section. By default, you’ll find three items, open one item.

3. Then add a title in the **Title** field. The title will always be visible.

You can add an icon or image, subtitle and description if required from the **Select Icon**, **Sub Title** and **Description **fields.

> *Note: The Select Icon, Sub Title, Description and Button content will show on hover only.*

4. Then in the **List Content** section, you have to list service items. You can add multiple items separated by a separator (|) like this Small | Medium | Large.

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 service boxes.

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

From the **Columns Manage** tab, you can manage the number of items in a row for desktop, tablet and mobile separately. You can also manage the gap between the items as well.

Now when you hover over the service box it will expand to show the list of items.