---
title: "How to Create a Collapsible Section in WordPress?"
url: https://nexterwp.com/docs/add-expand-in-wordpress/
date: 2023-07-15
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A wall of text at the top of a page asks the reader to commit before they know whether it is worth it. The Expand block shows the first part,..."
image: https://nexterwp.com/wp-content/uploads/2024/05/expand-block-settings-overview-1024x519.jpg
word_count: 656
---

# How to Create a Collapsible Section in WordPress?

## Key Takeaways

- Nexter Blocks Expand block turns any content into a collapsible panel in the WordPress block editor.
- Expand block supports three content sources: Text, Pattern, and Editor, with Editor allowing images and videos inside the collapsible section.
- Expand block places toggle buttons above or below the content and adds an extra button with text, an external link, and an icon when expanded.
- Expand block includes Extra Options for Max Height, Custom Opacity, and Transition Duration, plus Style tab controls for title, description, toggle button, and extra button.

A wall of text at the top of a page asks the reader to commit before they know whether it is worth it.

The Expand block shows the first part, then lets them open the rest — and what it hides can be text, a saved pattern, or any blocks you like.

[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.- **Content longer than the collapsed height**, or there will be nothing to expand.

https://www.youtube.com/watch?v=SyxzBIV3x68

## 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 what should be hidden into **Content**.

![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.*

## Three Ways to Fill the Box

| Content Source | What goes inside | Guide |
| -------------- | ---------------- | ----- |
| Custom Content | Text typed into the block | [Read more toggle for text](https://nexterwp.com/docs/add-read-more-toggle-button-to-text-in-wordpress/) |
| Editor | Any blocks placed inside the Expand block | [Load more button](https://nexterwp.com/docs/add-load-more-button-in-wordpress/) |
| Pattern | A saved pattern | [Use a pattern in the Expand block](https://nexterwp.com/docs/use-reusable-block-in-expand-block/) |

## What Each Panel Controls

| Panel | What you set there |
| ----- | ------------------ |
| Content | The title, where the content comes from, the toggle labels and icon, and its alignment |
| Extra Options | The collapsed height, the fade over the cut-off, and how long the animation takes |

## How It Behaves

- **All three sources really work.** Measured by clicking the toggle: custom text opened from 100 to 319 pixels, a pattern from 100 to 165, and blocks placed in the editor from 100 to 665. Each collapsed back on a second click.- **Max Height is the closed height.** Set it to 60 and the closed box measured exactly 60.- **The toggle is a real button**, so keyboard users can reach and operate it.- **Custom Opacity** fades the bottom of the collapsed box so the cut-off looks deliberate rather than chopped.- **Extra Button** adds an ordinary link beside the toggle — useful for *Watch video* next to *Read more*. It does not expand anything itself.

## Limitations

- **Pro only.**- **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.- **The AJAX option does not work.** With a pattern set to load over AJAX, the box opened completely empty and no request was made at all — the script that would fill it is never loaded. Leave it off and use the plain pattern source.- Hidden content is still in the page's HTML, so this is a presentation choice, not a way to keep anything private or to reduce what the page downloads.- One expandable area per block. For several independent sections, use several blocks.

## Troubleshooting

### The toggle does nothing

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

### The box opens but is empty

If you are using a pattern with the AJAX option on, turn that option off — the content is never fetched. Otherwise check the pattern still exists.

### The cut-off looks abrupt

Switch on **Custom Opacity** in Extra Options and set its height and colour to match your background.

### The animation is too fast or too slow

Change **Transition Duration (0 - 5000)**. It is in milliseconds, and 200 is the default.

### The block is missing from the inserter

Switch **Expand** on under **Nexter > Blocks** in your dashboard.

![Expand switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/expand-admin-enable.webp)

## Related Docs

- [Read more toggle for text](https://nexterwp.com/docs/add-read-more-toggle-button-to-text-in-wordpress/)- [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/)

## Frequently Asked Questions

**Q: Why is the Expand block not showing in WordPress?**
A: The Expand block only appears when the default WordPress Block editor is active and the Nexter Blocks plugin is installed and activated. It is also a Premium block, so the PRO version of Nexter Blocks is required. If it still does not appear, the usual miss is that the block itself has not been turned on under Nexter → Blocks. That activation step matters because the block stays hidden until it is enabled.

**Q: What can I use a WordPress expand block for on a page?**
A: Nexter Blocks uses the Expand block to turn any content into a collapsible panel, which is useful when you want to reduce clutter and keep a page easier to navigate. The page specifically calls out that collapsing sections help you add elements without compromising the overall design. That makes it a practical fit for long pages where you want content available without showing everything at once.

**Q: Can I add images or videos inside a collapsible section in WordPress?**
A: The Editor content source supports richer content inside the Expand block, including images and videos. That matters because it lets you build a collapsible panel with more than plain text, instead of being locked into a simple text-only accordion style. If you want to keep media tucked away until someone expands it, the Editor option is the one built for that use case.

**Q: What is the difference between Text, Pattern, and Editor in the Expand block?**
A: Text is for adding content directly in the editor, Pattern lets you build content with Gutenberg blocks as a reusable pattern, and Editor lets you use the WordPress block builder inside the Expand block itself. The practical difference is control: Text is simplest, Pattern is good when you want a structured layout, and Editor gives the most flexibility for mixed content like images and videos.

**Q: How do I make an expandable section easier to use on mobile?**
A: The Extra Options tab includes Max Height, which lets you set the initial height of the collapsible container for different devices. That matters on smaller screens because too much visible content can make the section feel heavy before it is expanded. The same tab also includes Custom Opacity and Transition Duration, so you can tune how much overlay shows and how fast the panel opens or collapses.

**Q: What styling options are available for a WordPress expand block?**
A: The Style tab covers the title, description, toggle button, and extra button. For the title, you can adjust typography, color, alignment, and margin. For the toggle button, there are controls for padding, margin, width, typography, color, background, icon size, placement, and color. Nexter Blocks also lets you style an extra button separately if you turn that feature on.