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.
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.
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.
- Type or paste what should be hidden into Content.
- In Extra Options, set Max Height — how tall the box is before anyone clicks. Make it shorter than your content.
- Set the Text for the open and closed labels.
- 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 |
| Editor | Any blocks placed inside the Expand block | Load more button |
| Pattern | A saved pattern | Use a pattern in the 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.
