---
title: "How to add Read More Toggle Button to Text in Elementor?"
url: https://theplusaddons.com/docs/add-read-more-toggle-button-to-text-in-elementor/
date: 2023-03-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Long blocks of text push the rest of the page down. A Read More toggle shows the first lines and lets visitors open the rest when they want it. The..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-add-Read-More-Toggle-Button-to-Text-in-Elementor_-1024x536.jpg
word_count: 743
---

# How to add Read More Toggle Button to Text in Elementor?

## 

- Unfold widget from The Plus Addons for Elementor cuts text to a set Max Height, fades the last visible lines, and adds a Read More / Read Less button.
- The Plus Addons for Elementor Pro is required, and Unfold appears in the free plugin with a lock icon while the Pro version is inactive.
- Content Options set Max Height from 1 to 500 px, with tablet values applying from 1024 px down and mobile values from 767 px down.
- Read More opens the box to full text height, Read Less closes it back to the current device’s Max Height, and several Unfold widgets on one page open and close independently.

Long blocks of text push the rest of the page down. A Read More toggle shows the first lines and lets visitors open the rest when they want it.

The **Unfold** widget from The Plus Addons for Elementor cuts your text to a set height, fades the last visible lines and adds a **Read More** / **Read Less** button.

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

***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/unfold/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Unfold is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds an Unfold widget shows nothing of it while Pro is inactive.- **Widget to enable:** Unfold, switched on under **The Plus Addons > Widgets**.

## How to Add a Read More Button to Text

- Drag the **Unfold** widget onto the page. In **Content > Unfold**, type a heading in **Title**, or clear the field if you don't want one.- Leave **Select Source** on **Custom Content**.- Paste the whole text into **Content**. The first part stays visible; the rest opens when the visitor clicks the button.

![The Unfold widget with Select Source set to Custom Content and product text in the Content editor](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-content.webp)

- Change **Expand Button Text** and **Collapse Button Text** if you want other labels than Read More and Read Less.

![The Expand Button Text field highlighted in the Unfold section, with Collapse Button Text below it](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-button-text.webp)

- Open **Content Options** and set **Max Height**, the height of the text box before it opens (default 100 px). Use the device icon next to the label for a different tablet or mobile height.- Choose **Content Expand Direction**: **Above Button** shows the text and then the button, **Below Button** puts the button first.

![Max Height set to 120 in the Content Options section of the Unfold widget](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-max-height.webp)

The same two options in motion:

![Animated demo of Content Expand Direction and Max Height in the Content Options section](https://theplusaddons.com/wp-content/uploads/2023/03/unfold-button-placement-container-height.gif)

- Publish the page and click **Read More** to test it.

![Product text cut after two lines with a fade and a Read More button on the live page](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-result-collapsed.webp)

After the click the full text is shown and the button reads Read Less:

![The same product text fully open with a Read Less button below it](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-result-expanded-fixed.webp)

## Content Options at a Glance

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Max Height | Visible height before the text opens, 1-500 px. The tablet value applies from 1024 px wide down, the mobile value from 767 px down. An empty tablet or mobile value uses the next larger device's height. | 100 px |
| Content Expand Direction | Above Button: text, then button. Below Button: button, then text. | Above Button |
| Custom Opacity | Off: a white fade covers the visible text. On: the fade covers only the bottom **Opacity Height** and fades to **Opacity Color**. | Off (Opacity Height 80 px) |
| Transition Duration (0 - 5000) | How long opening and closing take, in milliseconds. | 200 |
| Toggle Alignment | Position of the button row, per device. | Left |
| Scroll Top | After Read Less, scrolls the page back up to the widget title. | Off |

Here is a Read More toggle opening and closing:

![Animated demo of a Read More toggle opening and closing a block of text](https://theplusaddons.com/wp-content/uploads/2023/03/unfold-text-content-demo.gif)

## How It Behaves

- The button only appears when the text is taller than Max Height on that device.- Read More opens the box to the full text height and removes the fade. Read Less closes it to the Max Height of the current device.- Several Unfold widgets on one page open and close independently.

## Limitations

- **The default book icons do not show on the page.** They need Font Awesome, which the widget does not load. Choose your own icons in **Expand Button Icon** and **Collapse Button Icon**, and set **Style > Toggle Button > Toggle Icon Options > Size**: without a size, a chosen icon was about 40 px wide and pushed the button text onto two lines.- **The last line can be cut off when the text is open** if your theme adds space above paragraphs. The widget measures the text without that space.- Text shorter than Max Height gets no button, but the box keeps its height and the fade still covers the text.- A **Transition Duration** of 0 is treated as 200 ms.

To stop the cut-off last line, set **Style > Description > Margin** to 0 at the top. In our test a margin of 0 top and 16 bottom showed the whole text and kept the space between paragraphs.

![Description Margin set to 0 top and 16 bottom in the Style tab of the Unfold widget](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-style-description.webp)

## Troubleshooting

### There is no Read More button

The text fits inside Max Height. Lower **Max Height**, and check the tablet and mobile values too.

### The button has no icon

Pick an icon in **Expand Button Icon** and **Collapse Button Icon** and give it a size under **Toggle Icon Options**.

### The opened text is cut off at the bottom

Set the top value of **Style > Description > Margin** to 0.

## Related Docs

- [Unfold widget settings overview](https://theplusaddons.com/docs/unfold-elementor-widget-settings-overview/)- [Add a Load More button to any section](https://theplusaddons.com/docs/add-load-more-button-to-any-section-in-elementor/)- [Use Elementor templates in the Unfold widget](https://theplusaddons.com/docs/elementor-templates-in-unfold-widget/)- [Add a Read More button in blog posts](https://theplusaddons.com/docs/add-read-more-button-in-blog-posts-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the Read More button showing on my text in Elementor?**
A: The button only appears when the text is taller than the Max Height set for that device. If your content fits inside that height, Unfold has nothing to expand, so no button is shown. The page also notes that tablet and mobile values can differ, so a layout that works on desktop may still hide the button on smaller screens. Lowering Max Height is the fastest fix when the toggle never appears.

**Q: How do I add a Read More toggle to text in Elementor?**
A: The Unfold widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH is the widget used for this. It cuts text to a set height, fades the last visible lines, and adds a Read More / Read Less button. The workflow is simple: place Unfold on the page, use Custom Content, paste your full text, and set Max Height so only the first part shows until visitors expand it.

**Q: What should I use if I want different Read More heights on desktop, tablet, and mobile?**
A: Max Height supports separate device values, which matters because the visible cutoff can change a lot between screen sizes. The tablet value applies from 1024 px wide down, and the mobile value applies from 767 px down. If a tablet or mobile value is left empty, Unfold uses the next larger device’s height. That makes it easier to keep the teaser length consistent without manually rebuilding the block for each breakpoint.

**Q: Can I change the Read More and Read Less button labels?**
A: The button labels are editable, so you are not locked into the default Read More and Read Less wording. That helps when you want shorter copy or a tone that matches the page better. The same widget also lets you control whether the expanded content appears above or below the button, so label changes can be paired with a layout choice that reads more naturally for your design.

**Q: Why does my Read More button have no icon?**
A: The default book icons do not show because they need Font Awesome, and this widget does not load it. The fix is to choose your own icons in Expand Button Icon and Collapse Button Icon. The page also warns that icon size matters: without a size set under Toggle Icon Options, a chosen icon was about 40 px wide and pushed the button text onto two lines.

**Q: How do I stop the opened text from getting cut off at the bottom?**
A: A top margin on paragraph styling can make Unfold measure the text too tightly, which is why the last line may get clipped when the content opens. Setting Style > Description > Margin top to 0 removes that mismatch. In the page’s test case, using 0 top and 16 bottom kept paragraph spacing while showing the full text cleanly.