How To Add A Collapsible/Expandable Text Area In WordPress

collapsible text area

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 collapsible/expandable text area, you’ll be able to show a lot of content in a single post 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 Text Area In WordPress

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.

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

Let’s talk about the ‘Content Toggle’ first. Once you are in the WordPress post editor, click on the plus (+) sign and 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.

That’s it. You can see a demo here.

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.

Last Words

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

Copy link
Powered by Social Snap