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 this short tutorial where I will show you how to show/hide text in Wordpress posts and pages with a simple toggle effect.

Interested?

Let's do this!



Join the Discussion
Write something…
Recent messages
Mick18 Premium
Excellent idea. Thanks Zed. Will bookmark.
Reply
smartketeer Premium
Thanks Mickey!
Reply
Ragman1 Premium
Thank you Zed. Very nice.
Reply
smartketeer Premium
Thanks for the time Robert!
Reply
Chrissies Premium
Thats great stuff Z, just what I have been looking for, very many thanks :)
Reply
smartketeer Premium
Thank YOU!
Reply
dowj01 Premium
Excellent, thank you.
Justin
Reply
smartketeer Premium
Thanks for the time Justin!
Reply
ShihTzuSteve Premium
Another really useful lesson. Thank you, Zed.
Reply
smartketeer Premium
Thank YOU!
Reply
Top