---
title: "How to Add Read More Toggle Button to Text in WordPress?"
url: https://nexterwp.com/docs/add-read-more-toggle-button-to-text-in-wordpress/
date: 2023-07-15
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A long introduction is worth having, but not worth forcing on everyone before they reach the point. Custom Content shows the first few lines and folds the rest behind a..."
image: https://nexterwp.com/wp-content/uploads/2024/05/add-read-more-toggle-button-to-text-in-wordpress-1024x519.jpg
word_count: 464
---

# How to Add Read More Toggle Button to Text in WordPress?

## Key Takeaways

- Nexter Blocks Expand block adds a read more toggle button to expandable text in the WordPress block editor without shortcodes or custom code.
- Expand block supports blog posts, knowledge base articles, FAQ pages, and product or landing pages with long explanations, collapsed answers, or detailed specifications.
- Expand block lets the user place the toggle button above or below the collapsed text and adjust the initial container height for different screen sizes.

A long introduction is worth having, but not worth forcing on everyone before they reach the point.

Custom Content shows the first few lines and folds the rest behind a Read More button.

*For every Expand setting in one place, see the [Expand block guide](https://nexterwp.com/docs/add-expand-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-unfold-read-more-button/)

## Before You Start

- **Edition:** **Pro** — the Expand block is part of Nexter Blocks Pro.- **Block to enable:** Expand, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The text itself** — it is typed into the block rather than pulled from elsewhere.

## Steps

- Add the **Expand** block to your page and click **Design from Scratch**.

- Type a **Title** if you want one above the box.

- Set **Content Source** to **Custom Content**.

![The Content Source setting](https://nexterwp.com/wp-content/uploads/2026/09/expand-source.webp)

- Type or paste your text into the **Content** field.

![The Content field](https://nexterwp.com/wp-content/uploads/2026/09/expand-content.webp)

- In **Extra Options**, set **Max Height** — how tall the box is before anyone clicks. Make it shorter than your content.

![The Max Height setting](https://nexterwp.com/wp-content/uploads/2026/09/expand-maxheight.webp)

- Set the **Text** for the open and closed labels.

![The expand and collapse label fields](https://nexterwp.com/wp-content/uploads/2026/09/expand-labels.webp)

- Publish and click the toggle.

> ***Max Height has to be smaller than your content.** If the content already fits, there is nothing to collapse and the toggle does nothing useful — measured with a short paragraph in a 100 pixel box, where expanding actually made the box smaller.*

## How It Behaves

- **It really opens and closes.** Measured by clicking the toggle: the box went from 100 pixels to 319 and back to 100 on a second click.- **Max Height is the closed height**, so it decides how much of the text shows before anyone clicks. Set to 60, the closed box measured 60.- **Text** sets both labels — *Read More* and *Read Less* out of the box, but they can be anything.- **Custom Opacity** fades the last part of the visible text so the cut-off looks deliberate rather than chopped mid-sentence.

## Limitations

- **Pro only.**- **The text lives in this block's own field**, so it is not part of the normal editor flow — you cannot drop images or other blocks into it. For that, use " + a(LOADMORE_DOC, "the Editor source") + ".- Formatting is limited to what the field accepts, so complex layouts belong in a pattern instead.- Hidden content is still in the page's HTML. This is a presentation choice, not a way to keep anything private or to make the page lighter.

## Troubleshooting

### The button does nothing

Your text is shorter than **Max Height**, so there is nothing hidden to reveal. Lower the Max Height.

### The text is cut off mid-word and looks broken

Switch on **Custom Opacity** so the bottom fades out instead of stopping abruptly.

### I want images and other blocks inside, not just text

Switch **Content Source** to **Editor** — see " + a(LOADMORE_DOC, "the load more guide") + ".

## Related Docs

- [Load more button for blocks](https://nexterwp.com/docs/add-load-more-button-in-wordpress/)- [Use a pattern in the Expand block](https://nexterwp.com/docs/use-reusable-block-in-expand-block/)- [Expand block: all settings](https://nexterwp.com/docs/add-expand-in-wordpress/)