How to use toggle effect in your WordPress articles

Sometimes, when you write a lot of text on one page, you want to somehow organize it. If that text is in a form of questions and answers or for example short stories with titles stacked one onto another, hiding your text is one of the most popular options.

Showing and hiding content is usually referred as “toggling” and in this article, we are going to show you how to do that by using a plugin.

As with almost any case, there are more than just a few plugins which can help you create a toggle effect. For this purpose, we’re going to show you how to work with WP-ShowHide:

  1. Navigate to Plugins->Add New
  2. Search for WP-ShowHide
  3. Install and activate the plugin
  4. Open a post or create a new one where you want to place your toggle effect text
  5. Use the following shortcode to display toggled text:

[showhide type=”mytype” more_text=”Show My Text (%s words)” less_text=”Hide My Text” hidden=”yes”] This is my Text which is hidden [/showhide]

If you want to show more than one block of text, you should copy the code but you have to change the type in the shortcode. For example, if your first block of text is type=”mytype”, you could name the other one type=”mytype2”, and so on.

Once you try the plugin, you will notice it looks very plain. The plugin won’t give you any graphical user interface where you could style your toggled text, but you are free to play with CSS styling.

In order to style the output differently, you’ll need to know the following. HTML code which plugin creates looks like this.

HTML:

CSS:

.sh-link A { }
.sh-content { }
.pressrelease-link { }
.pressrelease-link.sh-hide A { }
.pressrelease-link.sh-show A { }
.pressrelease-content { }
.pressrelease-content.sh-hide { }
.pressrelease-content.sh-show { }

Now you can style each part differently and you create something unique.

If you want to learn more cool tricks about WordPress, let us show you more tutorials that will help you level up your skills. Also, check our resources that will help you to become a better webmaster.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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