How to create a toggle effect to show & hide text in Wordpress posts and pages

bysmartketeer

6.8K followers

Updated 5 years ago

The famous toggle effect technique is widely used accross many well established websites in various different ways.

The point: a basically (by default) hidden content segment becomes visible when the visitor clicks on a given specific link or button.

And believe me, there are many scenarios where you may want to hide (initially) certain parts of your post or page content. The most common reason is to create a compact look and allow users to click and see more information if/when they want.

I'll give you one example ... Let's say, that you want to create a FAQ page with a bunch of listed questions and answers. Instead of having an endless page with only a few questions and answers listed in the above the fold area, you can use a handy show/hide toggle effect that will allow you to display all your questions above the fold (the upper segment of your page visible without scrolling). When a user clicks on a given question, the answer will become visible right below and when the user clicks the same question again, the answer will collapse.

It's a simple yet very efficient method that will allow you to create faster and truly user friendly websites.

This is why I've decided to create a short tutorial where I will show you how to show/hide text in Wordpress posts and pages with a simple toggle effect.

Interested?

Here it is:

How to create a toggle effect to show & hide text in Wordpress posts and pages

Enjoy it!