How To Add A Collapsible/Expandable Text Area In WordPress

A collapsible/expandable text area saves space and keeps visitors engaged to the post/page. This way, the visitors can decide whether they want to view the content or not.

Using a collapsible/expandable text area, you’ll be able to show a lot of content in a single post/page without making the post lengthy.

When it comes to adding collapsible/expandable texts in WordPress, you have two options. Either you need to have coding knowledge or you need to use a plugin.

Using a plugin is comparatively easy. Here I’ll show you how to add a collapsible text area in WordPress using a plugin.

How To Add A Collapsible/Expandable Text Area

There is a handful number of WordPress plugins that let you add show-hide or collapse-expand texts to your WordPress posts/pages.

Here we will be talking about two plugins – Ultimate Blocks & Collapse-O-Matic. The first one is for the new WordPress block editor and the second one is for the Classic editor.

Using The Ultimate Blocks Plugin

Ultimate Blocks is a Gutenberg blocks plugin that extends the functionality of the new WordPress Block editor. It has two specific blocks for creating collapsible/expandable text areas.

If you need help with installing a plugin, check our step-by-step guide on installing a WordPress plugin.

Once you’ve installed the plugin, go to your WordPress post editor and click on the plus (+) sign to add a new block. Then search for ‘Content Toggle’.

Insert the block and then add the title of your collapsible/expandable text in the ‘Panel Title’ and add the main content under it.

You can add more collapsible text area by clicking on ‘+’ sign under the box.

Once you’ve added all the collapsible text area, you can configure things like initial state, FAQ schema, icon, and more.

Now let’s see the ‘Expand’ block. The ‘Expand’ block is mainly useful for read more and read less dropdown text.

Upon inserting the ‘Expand’ block, you need to add the content that you want to show before the ‘show more’ text and add the hidden content between ‘show more’ and ‘show less’ text.

So this is how you can add collapsible/expandable content in your WordPress posts/pages. Now let’s see how to do it in the Classic editor.

Using The Collapse-O-Matic Plugin

Collapse-O-Matic is a dedicated plugin for adding a collapsible text area in WordPress. 

One you’ve installed and activated the plugin, go WordPress Dashboard > Settings > Collapse-O-Matic and customize the settings if needed.

If you are a new user and don’t understand any configuration here then leave in the default state. Now create a new or open the existing post/page where you want to add a collapsible text area.

Now you have to use this shortcode tag.

[expand title=”Trigger Text”]Target Content[/expand]

Insert a shortcode block and paste below code

[expand title="Trigger Text"]

Before the targeted content. In the place of ‘Trigger Text’ write your own one.

Then insert your desired text blocks, afterward insert another shortcode block. “[expand]”.

Paste the shortcode in it. Then check out the changes. 

It’s that simple.


I hope both processes are clear to you. You can use any of the plugins to add a collapsible/expandable text area in your WordPress post/page.

If you have any queries feel free to ask, I will be happy to answer those. If you liked the post, please share it on your favorite social media site.

Also Read:


9 responses to “How To Add A Collapsible/Expandable Text Area In WordPress”

  1. Steve Troxel Avatar

    Is there a limit to how many Expand block on a single page? I need a way to include about 300 and am wondering if this will work before I start down this path.

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      There’s no limit. But adding 300 blocks might slow down the page.

  2. Devender Gupta Avatar

    Thanks for your plugin, otherwise I was doing this manually by code.

  3. Krisztina Avatar

    Can you add an anchor to a piece of copy in a different extendable block? (E.g. you have 2 blocks and you want to jump from inside block one to inside block 2, expanding that section.) Is it possible?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Possible if the section is already expanded. It won’t work with a collapsed section.

  4. Luqman Essam Avatar

    Let me know,
    This is SEO friendly?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Yes, Google bot can see the hidden content. So it won’t affect SEO.

  5. alaia Avatar

    How can you use the shortcode to only show on mobile?

Leave a Reply

Your email address will not be published. Required fields are marked *

Need help?