Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

Show or hide text in WordPress using 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.

Show hide text with a plain link using shortccode

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.

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

Classic block editor view

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.

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

Shortcode inside the post editor

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

Adding text to hide

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.

Show hide text with a button

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

57 CommentsLeave a Reply

  1. Thanks! How can I apply it in new version of WordPress? in the old version you can switch between visual and text. In the new one where to write the code?

    • You can use the Classic block if you want a similar experience to the classic editor for this shortcode.

      Admin

    • For the display of the plugin, you would want to reach out to the plugin’s support for the currently available customizations.

      Admin

    • You would want to reach out to the plugin’s support for if that is supported at the moment

      Admin

    • While possible to do this without a plugin, we do not have a beginner friendly method to do this without a plugin

      Admin

  2. nice and simple plugin! this works for me to hide my Attachment sections (which is a long list of print-out with lots of paragraphs).

    But I wonder if the notation text can be editable, e.g. not “Hide Press release (123 Less Words)”, but to reflecting my hidden title?:

    Show Attachment A1: …
    Hide Attachment A1: …

    • You can change that by editing the more_text in the second shortcode example we show :)

      Admin

  3. Thanks admin fr this wonderful post but i would like to know if it would be possible for me to embed a popunder link under the “show more” toggle.

    Thanks

  4. Is it possible to use this plugin on multiple paragraphs on a static page? I want to use it to show/hide information in single code. If so, what “type” would it be?
    I have tried with one code but paragraph formatting is not possible,
    when clicked on more we get the text in continuation

    Thanks!

  5. How did you “Add the short code like this?” Do you hover? Right click? Type it out? When I type in the short code, my pages literally show the words. Help please!!

    • Is that plugin good to hide phone number on my website? I want to hide last four number on my site. And when people come and want to see my number they must click on number to show last four number.I wont do this because some people use my phone with some program and give another people. If someone know good plugin I will be very helpful for help.Thanks.

  6. I followed the instructions but seems like WordPress doesn’t allow the code to work on free themes. :( Is there any other way how this can be made?

  7. Doesn’t appear to be working in draft mode (need to iron things out before I publish page). Pasting shortcode in text editor and visual editor but when I preview I see shortcode and nothing’s hidden. Is this normal?

  8. Hi.
    I have some texts in columns that arnt same in length witch messes with grid. I need plugin that can hide second part of the text- the excess, and to show it in continuity with first part.
    What do u recommend?

  9. I am also wondering how to replace the “show more”, “show less” text with a custom button image. How is this possible?

  10. Hello,

    This is sounds like a great plugin.

    I wonder if there’s any chance to use it to toggle the posts on a front page by clicking on their title?

    If not, is there any plugin or code that allows that?

    Thank you in advance.
    Federica

  11. Trying to center the show/hide text but it’s left justified on the webpage. I’ve tried so many HTML tags, but to no avail.

    Thanks,

  12. Hi there,

    Thank you very much for sharing this quick video. It was indeed very easy to install. In your video the link are all aligned to the left. I tried to do it with the plugin instructions as written by the creator of the plugin but I can’t manage to make it work. It is always shows centered.

    Can you please help me with this issue please?

    Thank you so much!

  13. sir I want to change the “show more text” with text with” buttons” how to do it please explain or give the coding for it…………..

  14. sir I want to change the “text” with text with buttons how to do it please explain or give the coding for it…………..

  15. What if I want to see multiple Show/Hide features on a page. The toggle doesnt seem to work for that!

    • Just add sequential numbering to your tags.

      ie

      [showhide type=”post1″ more_text=”Show more…” less_text=”Show less…”]
      Text you want to hide
      [/showhide]

      [showhide type=”post2″ more_text=”Show more…” less_text=”Show less…”]
      Text you want to hide
      [/showhide]

      etc

  16. Does toggling content has any effect on SEO. Is Google Bot able to analyze toggled content also.

  17. I want to hide or show all citations/references depending on the readers desires. I don’t want to create duplicate articles with and without the footnotes. Is there any way to toggle all content visibility at once from a single control?

  18. Hi

    Thanks for the post.

    I wanted to know is it possible to use this plugin to create an archive page that ONLY shows the post titles, when the user clicks on the toggle it shows the full post and can also close it again.

    Or can you advise on a better way to do this please?

    • This plugin is not the best way to do that. What you need is to modify archives.php template in a child theme and then add the toggle effect before <?php the_content() ?> or <?php the_excerpt() ?> template tag.

      Admin

  19. It is a good plugin.!

    But I need a new feature that is I hide some content example dowloadlink, the link can display only after comment my post.

    Could you help to import it?
    thx.

  20. I like this, but do you know if this can or if it can be modified to toggle the comments area? I would love to be able to allow the user to hide and show the various comments rather then them all to be displayed.

    Thanks in advance

        • I’d like to place multiple “show/hides” on my page. Not clear how to implement the jQuery found on the jQuery FAQ Accordian link . I think you are saying that a WP FAQ section is not needed, is that correct?

          When I uploaded the “my-accordian” folder to the plugins directory, WP recognized the “WPBeginner’s FAQ Accordion” plugin.

          Can you provide some more detail to enable multiple “show/hides” on pages not using the WP FAQ? Thanks so much.

  21. Is it possible to use this plugin on paragraphs on a static page? I want to use it to show/hide sections of my privacy policy. If so, what “type” would it be?

    Thanks!

  22. Thank you for this site of wonderful info! I am brand new to hosted WP & every time I Google something Example: “Install Google Analytic on WordPress” I ALWAYS pick your site for the answer. I didn’t realize I was doing it until tonight!
    Thank you for helping us WP Noobs and Olds alike!

  23. Is it possible to add an image where the ‘Show more…’ text is, so that the image can be clicked to show more/less text instead of a generic sentence?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.