---
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-04-14
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

- Nexter Blocks includes the Animated Service Boxes block for creating expandable service boxes in WordPress.
- Users can manage the number of items displayed in a row for desktop, tablet, and mobile separately using the Columns Manage tab.
- The service boxes can include a title, icon or image, subtitle, and description that appear on hover.

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.

## Frequently Asked Questions

**Q: What should I do if the Animated Service Boxes block isn't showing up?**
A: If the Animated Service Boxes block isn't appearing, ensure that Nexter Blocks is installed and activated. This block is part of the Nexter Blocks suite, and without it, you won't have access to its features. Double-check your installation and activation status in the WordPress admin panel.

**Q: Can I use the Animated Service Boxes block for showcasing different services?**
A: The Animated Service Boxes block is ideal for showcasing multiple services or products in a compact layout. You can list service items separated by a separator (|), allowing users to click and expand for more details. This enhances both functionality and design, making it perfect for service-oriented websites.

**Q: What is the best practice for managing the number of service boxes displayed?**
A: To manage the number of service boxes displayed, use the Columns Manage tab. This feature allows you to set the number of items in a row for desktop, tablet, and mobile separately. Adjusting these settings ensures your layout is responsive and visually appealing across devices.

**Q: Are there any limitations when using Style 2 for service boxes?**
A: With Style 2, all items will always be visible, which may not be ideal for every layout. If you're looking for a more compact design that allows users to expand and see details on hover, consider using Style 1 instead. This choice impacts how much information is displayed initially.