---
title: "How to Create an Expandable Service Box in Elementor?"
url: https://theplusaddons.com/docs/create-an-expandable-service-box-in-elementor/
date: 2024-05-29
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "An expandable service box keeps a services grid short: each card shows a heading and a line of summary, and the full list of what is included only appears when..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-an-Expandable-Service-Box-in-Elementor_-1024x536.jpg
word_count: 914
---

# How to Create an Expandable Service Box in Elementor?

## 

- Animated Service Boxes ships only in The Plus Addons for Elementor Pro, and the free plugin has no equivalent widget.
- Services Element uses one List Content field per card, with rows separated by the pipe character |, such as Strategy | Wireframes | Design System | Handoff.
- Style 1 hides the list until hover and keeps the card at 285 × 167 pixels, while Style 2 shows every list from page load.
- The card does not grow when the list appears, so the list opens underneath the box and can cover content below unless there is room or Style 2 is used.

An expandable service box keeps a services grid short: each card shows a heading and a line of summary, and the full list of what is included only appears when the visitor hovers it.

The **Animated Service Boxes** widget calls this layout **Services Element**, and the list comes from a single field where you separate the rows with a pipe character.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Animated Service Boxes** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Animated Service Boxes** and turn its toggle on.- **Prerequisite:** your list of items for each card, ready to type as one line separated by `|`, for example `Small | Medium | Large`.- **Nothing else to switch on:** no extension and no site-wide setting is needed for this widget.

## Build the service boxes

- Edit the page with Elementor and drag in the **Animated Service Boxes** widget.- In **Content > Animated Service Boxes**, set **Main Style** to **Services Element**.- Pick a **Style**. **Style 1**, the default, hides the list until the card is hovered. **Style 2** shows the list all the time.- Turn **Image/Icon** on if each card should carry an icon, an image or a Lottie file above its heading.

- Open the **Animated Service Boxes** list — three items to start. In each one fill in the **Title**, the **Sub Title** and the **Description** that make up the visible part of the card.- In the same item, put the list in **List Content**, separating the rows with `|`. The field is visible for every layout, but only **Services Element** renders it — the panel says so under the field.- Optional: turn **Button** on and set each item's **Button Text** and **Button Link**.- In **Content > Columns Manage**, set **Desktop Column**, **Tablet Column** and **Mobile Column**. Leave room below the row — the list opens downwards over whatever is beneath it.

![Services Element Style 1: hovering the middle box reveals its List Content below the card](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-services-element.webp)

Use **+ Add Item** for more cards and **Columns Gap/Space Between** to space them out.

## Settings for this layout

| Setting | Where | What it does | Default |
| ------- | ----- | ------------ | ------- |
| **Style** | Content > Animated Service Boxes | **Style 1** reveals the list on hover; **Style 2** shows it always. | **Style 1** |
| **List Content** | inside each item | The rows of the list, separated by `|`. Rendered by this layout only. | four sample rows |
| **Image/Icon** | Content > Animated Service Boxes | Master switch for each item's **Select Icon** field. | **Hide** |
| **Button** / **Button Style** | Content > Animated Service Boxes | Adds a per-item button in one of three designs. | **Hide** / **Style 1** |
| **Desktop Column** / **Tablet Column** / **Mobile Column** | Content > Columns Manage | Cards per row, per device. | **Column 4** / **Column 3** / **Column 2** |

## How It Behaves

- **The list is hidden until you hover, in Style 1.** On load every list panel measured as hidden and fully transparent. Hovering one card made only that card's list visible; the other two stayed hidden.- **Each pipe becomes one row.** `Strategy | Wireframes | Design System | Handoff` rendered as four separate list rows.- **The card does not change size.** It measured 285 × 167 pixels before the hover and 285 × 167 pixels after it. The list is revealed under the card rather than pushing it open, so the row below does not move either.- **Style 2 shows everything at once.** With Style 2 there is no hidden state at all; every card shows its list from the moment the page loads.

## Limitations

- **The Services Element box does not grow.** In Style 1 the card stays the same size — it measured 285 × 167 pixels before and after hovering — and the list is revealed underneath it, over whatever sits below. Leave room under the row, or the list will cover the next one.- **List Content is shown for every layout but only renders here.** If you fill it in while **Main Style** is something else, nothing appears on the page.- **There is no per-row link.** The list rows are text; only the card's button, or its title, can be a link.

## Not verified

So you know exactly what has and has not been checked:

- **Select Icon.** Icon, Image and Lottie were not rendered with a real icon font or Lottie file, so nothing is claimed here about how they look.- **Image Resolution.** Only the default **Full** was used; no other size was measured.- **Button Style 2 and Style 3.** Only the default **Style 1** button was rendered.- **The Style tab.** No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.- **Responsive behaviour.** Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.

## Troubleshooting

### My list does not appear

Check that **Main Style** is **Services Element**. The **List Content** field is visible in every layout but only this one draws it.

### The whole list is one long row

The separator is the pipe character `|`. Commas and line breaks are not split.

### The list covers the content below the row

The card does not grow, so the list opens over whatever is beneath. Add bottom padding to the container, or use **Style 2**, which shows the list in place.

### I want the list visible without hovering

Switch **Style** to **Style 2**.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Change Background Image on Hover in Elementor?](https://theplusaddons.com/docs/change-background-image-on-hover-in-elementor/)- [How to Add an Info Banner in Elementor?](https://theplusaddons.com/docs/add-an-info-banner-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before building an expandable service box in Elementor?**
A: The setup depends on Elementor free plus the Pro version of The Plus Addons for Elementor, because Animated Service Boxes ships only in The Plus Addons for Elementor Pro. The page also expects your list items to be ready as one line separated by the pipe character |, such as Small | Medium | Large. That matters because commas and line breaks are not split into rows.

**Q: Why is my service box list not showing up?**
A: Main Style has to be set to Services Element, because List Content is visible in every layout but only this one renders it. That is the usual failure point when the field is filled in but nothing appears on the page. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this layout-specific behavior so the same widget can support different card styles without showing the list everywhere.

**Q: How do I make the list appear only on hover instead of always visible?**
A: Style 1 is the hover-based layout. It keeps the list hidden until the card is hovered, while Style 2 shows everything from page load. That choice changes the whole reading pattern of the grid, so Style 1 works better when you want compact cards and Style 2 works better when you want the full service list visible without interaction.

**Q: Why does my whole service list turn into one long row?**
A: The separator has to be the pipe character |. The page says commas and line breaks are not split, so they stay as plain text instead of becoming separate rows. A quick check is to rewrite something like Strategy | Wireframes | Design System | Handoff, which should render as four distinct list rows.

**Q: How do I stop the expandable list from covering content below it?**
A: The card does not grow when the list opens, so the list reveals underneath the box instead of pushing later content down. That means you need room below the row or bottom padding on the container, otherwise the expanded list will sit on top of whatever comes next. Style 2 avoids that overlap because it shows the list in place.

**Q: What is the best way to build a short services grid with expandable details?**
A: Use Animated Service Boxes with Main Style set to Services Element and Style 1 if you want a compact grid that expands on hover. Each card can carry a title, subtitle, description, optional image or icon, and a pipe-separated List Content field for the full service breakdown. That keeps the visible layout short while still letting visitors inspect details when they need them.