How to Show and Hide Text in WordPress Posts with the Toggle Effect

Do you want to show and hide text easily in your WordPress posts and pages?

Sometimes you might want to allow your users to see hidden content when they click on a specific link. This is especially helpful when you want to feature a frequently asked questions section.

In this article, you’ll learn how to show and hide text in WordPress posts with the toggle effect.

The first thing you need to do is install and activate the Show-Hide / Collapse-Expand plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no options for you to configure.

It allows you to use two methods to hide any text on your website with a link to expand and show the text.

Show Hide Text in WordPress Using Shortcode

For this method you will need to manually add a shortcode to show or hide text.

Here is a sample shortcode that you can use as a starting point.

[bg_collapse view="link" expand_text="Show More" collapse_text="Show Less"]

The text you want to hide…

[/bg_collapse]

After adding the shortcode to your post or page, you can save your changes and preview it. You’ll see a plain β€˜Show More’ link and clicking on it will reveal the hidden text.

There are plenty of parameters for this shortcode which will change the appearance of your show / hide text.

For instance, you can add a button instead of plain link, add icons, and even use custom CSS within this shortcode.

However, it would be quite complicated to generate this shortcode manually. In that case, you can use the second method which allows you to generate the shortcode using a visual editor.

Show Hide Text in WordPress Using Visual Editor

For this method, you’ll need to add the β€˜Classic’ block in your WordPress content editor. Simply click on the add new block button and search for the β€˜Classic’ block.

Once you insert the classic block, you’ll see a visual editor with formatting buttons that looks similar to the older classic WordPress editor.

In the toolbar, you need to click on the β€˜Collapse/Expand’ button. This will bring up a popup where you configure the shortcode parameters visually.

From here you can choose the link or button, color, icons, and the text to display for show and hide buttons.

After choosing the parameters, click the β€˜OK’ button to insert it into your post. You’ll see the shortcode added inside your post editor.

You can now go ahead and add the text that you want to hide between the shortcode start and end tags.

After that, you can save your post or page and visit your website to see your changes in action. Here is how it looked on our test site.

We hope this article helped you learn how to show and hide text in WordPress posts with the toggle effect. You may also want to check out our list of the must have WordPress plugins for all websites, and our tutorial on how to add dynamic personalized content in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Leave a Reply

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

error: Content is protected !!

Pin It on Pinterest

Add address