Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Show and Hide Text in WordPress Posts with the Toggle Effect

Sometimes you may want to hide parts of your post or page content to give that article a compact look and allow users to click and see more information if they want. This technique is famously known as the toggle effect which is used across numerous websites in various different ways. The hidden content becomes visible when a user clicks on a specific link or button. This show/hide toggle effect is extremely handy for a FAQ page. You land on a page where you see bunch of questions listed. When a user clicks on the question, the answer expands right below. When you click on the question again, the answer will collapse. In this article we will show you how to show and hide text in WordPress posts and pages with the toggle effect.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the WP ShowHide plugin. The plugin works out of the box and there are no options for you to configure. To hide the text in posts using the toggle effect, you need to use the shortcode like this:

[showhide type="post"]Text you want to hide[/showhide]

ShowHide toggle effect on text in WordPress posts

Upon first usage of the shortcode you will notice that it shows the toggle link with the text “Show Press Release (xx more words)”. Actually the plugin was written specifically for a site that published press releases. However this text can be easily changed to whatever you like. Use the shortcode like this:

[showhide type="post" more_text="Show more..." less_text="Show less..."]
Text you want to hide
[/showhide]

The showhide shortcode comes with some parameters that you can use to gain control on how it works in your individual posts. The default parameters and the values for the shortcode are these:

[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

We hope that you found this article helpful in adding the toggle effect to hide text in your WordPress posts and pages. Let us know would you rather use toggle effect to hide full posts or use default WordPress excerpt functionality?


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. mike says:

    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?

  2. milan says:

    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?

  3. Sav says:

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

  4. Federica says:

    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

  5. David Kallander says:

    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,

  6. Janie S. says:

    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!

  7. Umar sajjad says:

    I want to use Show hide multiple time on a page.

  8. lakshman says:

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

  9. lakshman says:

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

  10. Dana says:

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

    • Paul says:

      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

  11. Randy Utama says:

    Hello,

    Is this plugin support responsive or mobile theme?

    Thanks

  12. Mohammad Qaiser says:

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

    • WPBeginner Support says:

      Yes, Google bot is able to read the toggled and untoggled content.

      • Bhanu says:

        Thanks but I didn’t understand it clearly. I want to know whether the toggle content is indexed by google or google ignores the toggled content?

  13. Grant says:

    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?

  14. Ibn Kassiem says:

    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?

    • WPBeginner Support says:

      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.

  15. eleven-yu says:

    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.

  16. Grace says:

    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

  17. ampatel says:

    Nice plugin, but is it possible to have multiple read more’s/read less?

    Thanks

    • Mark Kolodziej says:

      I would like to know this as well.

      • WPBeginner Support says:

        Take a look at our jQuery FAQ Accordion tutorial. Ignore the FAQ’s part and you can implement the same jQuery on any text you want.

        • Jumpringer says:

          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.

  18. Amanda Mays says:

    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!

  19. Nico says:

    Super useful! You saved me from learning how to do it myself =) haha
    Thanks!

  20. Bella's Shelf says:

    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!

  21. Clawrence says:

    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?

    • Editorial Staff says:

      You can most likely customize the plugin to do that.

      • Adam Kellett says:

        How is this done? I’ve tried this with no success:
        [showhide type=”…” more_text=”” less_text=”” hidden=”yes”]

        Is it complicated to make this customization?

  22. fukr says:

    i want to say this is really useful..thanks

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.