---
title: "How to Add Read More Button to Elementor Icon List?"
url: https://theplusaddons.com/docs/add-read-more-button-to-elementor-icon-list/
date: 2024-03-30
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A long list pushes everything else down the page. Showing the first few items and letting visitors open the rest keeps the section short. The Style Lists widget in The..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Add-Read-More-Button-to-Elementor-Icon-List_-1024x536.jpg
word_count: 566
---

# How to Add Read More Button to Elementor Icon List?

A long list pushes everything else down the page. Showing the first few items and letting visitors open the rest keeps the section short.

The Style Lists widget in The Plus Addons for Elementor does this with its **Read More Toggle**, and you choose how many items stay visible and what the link says.

*To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, [click here](https://theplusaddons.com/docs/style-lists-widget-settings-overview/).*

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

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

## Before You Start

- **Edition:** **Free** — Style Lists is part of the free The Plus Addons for Elementor plugin.- **Widget to enable:** **Stylish List**, switched on under **The Plus Addons > Widgets**. That is the card name on the Widgets screen; in the Elementor panel the widget is called **Style Lists**.- **Icons:** the widget does not load Font Awesome's stylesheet. Font Awesome 5 icons are drawn as inline SVG and always show; Font Awesome 4 icons (including the three defaults) come out blank on a page that has no other Font Awesome user.

## Steps

- Add the **Style Lists** widget and fill in the items under **Content**.- Open **Content > Read More Toggle** and switch **Read More Toggle** on.- Set **List Open Default** to the number of items you want visible before anyone clicks.- Change **Expand Section Title** and **Shrink Section Title** if the default wording does not fit.

![The Read More Toggle section of Style Lists switched on in the editor, with three items and a + Show all options link on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-readmore.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Read More Toggle | Turns the expand link on. | Hide |
| List Open Default | How many items are visible before expanding (0–100). | 3 |
| Expand Section Title | Link text while the list is collapsed. | + Show all options |
| Shrink Section Title | Link text while the list is expanded. | - Less options |
| Toggle Direction (Pro) | **Default** puts the link beside the list, **Vertical** puts it below. | Default |

![A numbered Style Lists list on the front end showing three items and a + 3 More Options link, then the full list after the link is clicked](https://theplusaddons.com/wp-content/uploads/2024/03/Read-More-Button-to-Elementor-Icon-List-demo.gif)

## How It Behaves

- Exactly **List Open Default** items are shown; clicking the link reveals all of them and changes the wording to the shrink text. Clicking again collapses it back.- The link only exists when the list has *more* items than **List Open Default**. Six items with List Open Default 6 renders no link.- The hidden items are still in the page, just hidden with CSS, so they are in the HTML from the start.- If **Display Counter** is also on, only the visible items carry a number while the list is collapsed.- Style the link under **Style > Read More Toggle**.

## Limitations

- Setting **List Open Default** to **0** does not hide everything. The link is still rendered but hides nothing, so the whole list shows and the link does nothing until it is clicked twice. Use 1 if you want a nearly closed list.- There is no animation, and no way to expand in steps — one click reveals every remaining item.- In the free plugin the link always sits beside the list; moving it below needs Pro's **Toggle Direction**.

## Troubleshooting

### There is no link on the page

The list needs more items than **List Open Default**. With the default of 3 you need at least four items.

### All the items are visible anyway

Check **List Open Default** is not 0. Zero leaves every item visible.

### The link is in the wrong place

In Pro, set **Toggle Direction** to **Vertical** to move it below the list. In the free plugin it stays beside the list.

## Related Docs

- [Style Lists Widget: Settings Overview](https://theplusaddons.com/docs/style-lists-widget-settings-overview/)- [How to Create a Numbered List in Elementor?](https://theplusaddons.com/docs/create-numbered-list-in-elementor/)- [How to add Label Tab to Elementor Stylish List?](https://theplusaddons.com/docs/add-label-tab-to-elementor-stylish-list/)

## Frequently Asked Questions

**Q: Why isn’t the Read More link showing on my Style Lists widget?**
A: The link only appears when the list has more items than List Open Default. With the default value of 3, you need at least four items before the toggle shows up. That behavior matters because the widget is designed to keep long lists short at first, not to add a link to every list. If the list length matches the open count, there is nothing left to expand.

**Q: What should I set for List Open Default if I want most of the list hidden at first?**
A: List Open Default controls how many items stay visible before expansion, and it accepts values from 0 to 100. A practical detail from the page is that 0 does not hide everything, because the whole list still shows and the link does nothing until it is clicked twice. If you want a nearly closed list, use 1 instead of 0.

**Q: How does the Read More Toggle behave after someone clicks it?**
A: The toggle reveals every remaining hidden item in one click and then switches to the shrink text. Clicking again collapses the list back to the original visible count. The key limitation is that there is no step-by-step expansion and no animation, so this is a simple show-all switch rather than a progressive reveal.

**Q: Can I move the Read More link below the list instead of beside it?**
A: That depends on edition. In the free plugin, the link always sits beside the list. Moving it below requires Pro and its Toggle Direction setting, where Vertical places the link under the list. That makes layout control an edition-specific choice, not just a style preference.

**Q: Why are some icons blank in Style Lists?**
A: Style Lists in The Plus Addons for Elementor does not load Font Awesome’s stylesheet. Font Awesome 5 icons are drawn as inline SVG and always show, but Font Awesome 4 icons, including the three defaults, come out blank on a page that has no other Font Awesome user. That means icon choice can affect whether anything renders at all.

**Q: What’s the best way to keep a long icon list short without losing content?**
A: Use Read More Toggle in The Plus Addons for Elementor Style Lists so only the first few items are visible and the rest stay hidden in CSS until expanded. The hidden items are still in the HTML from the start, which helps preserve all content while keeping the section compact. If you also turn on Display Counter, only visible items carry numbers while collapsed.