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 Ultimate Blocks Plugin (Block Editor)

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 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 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.


Conclusion

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 with your friends. 

close

Easy WP Tweaks

10X Your Site Growth!

Join the growing library of Easy WP Tweaks to grow your WordPress site.

Leave a Comment

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