How to hide content and spoilers in WordPress posts

Create hidden content in WordPress to keep a secret and only reveal it when the reader clicks it.

Sometimes you may want to hide content in an article on your website and not show it until the reader clicks a link. Hiding spoilers is one example. Here’s how to do it with Shortcodes Ultimate plugin.

Why hide content in a post?

There are many reasons for wanting to hide content in a post and here are just a few ideas you might want to use.

If you review books, movies, TV shows and similar items you may want to hide plot twists, endings, the identity of the mysterious bad guy, what happens to a character and so on.

Knowing these would spoil the fun and the suspense for the viewer or reader. You could hide any plot giveaways and require readers to click a link if they really want to see the hidden spoiler. They then have the choice to read or not to read the spoiler.

You might want to include questions and answers to challenge your readers’ knowledge. For example, you could create a quiz in which the questions can be seen, but the answers are hidden until the reader clicks them.

That could be useful for educational articles and online courses, such as a self-test section at the end to make sure the reader has learnt everything.

Sometimes websites show the introduction to an article and hide the main body. One reason for doing this is to bring content from the bottom of the page up to the top, at least temporarily until the reader clicks the Show More link or whatever they choose to call it.

At the bottom of the page could be adverts, links to other content, an email signup form or other items you want people to see.

Shortcodes Ultimate WordPress plugin

One of the easiest and best ways to create these features is to use a plugin called Shortcodes Ultimate. It has 700,000 users and an almost perfect 5/5 score on WordPress.org plugins library. That shows it is and excellent plugin that is well worth having.

Shortcodes Ultimate WordPress plugin

Click Plugins in the WordPress sidebar and click the Add New button. Search for ‘Shortcodes Ultimate’ and then install it and activate it. It is now ready to use.

A simple example

Suppose you wanted to hide a paragraph of text. The simplest form of shortcode is this:

[ su_expand height=”0″ ] This text is hidden on the page and contains some content you don’t want the reader to see unless they click a link. [ /su_expand ]

Here is the shortcode in action click the link:

You can hide images too. Here is an example of a hidden image:

Click the link to reveal the cat:

See the height=”0″ in the square brackets? This is the amount to show and a zero means how nothing.

Let’s say the height of a line of text on your web page is 20 pixels. If you set height=”20″ then the first 20 pixels of the hidden area is shown, in other words, the first line of the text.

You might need to experiment with this number to get it right. Here is an example of getting the height just right to show a single line of text:

[ su_expand height=”20″ ] I wanted to show the first line of text and set the height to the height of a line of text so that it can be seen. The remaining text on lines 2, 3 and so on are hidden. [ /su_expand ]

Shortcode parameters

The height=”0” is an example of a parameter in the shortcode command. There are many more, such as:

more_text=”Reveal the answer”
less_text=”Hide the answer”
hide_less=”no”
text_color=”#008000″
link_color=”#0088FF”
link_align=”left”

The usage is fairly obvious and more_text and less_text are the links to show or hide the hidden text. Set hide_less=”no” if you don’t need the reader to be able to hide the text again. It then stays on the page permanently. The text and link colours can be set and the link can be aligned left, right or center.

Here is an example with most of those parameters:

[ su_expand height=”25″ more_text=”Reveal the answer” less_text=”Hide the answer” hide_less=”no” text_color=”#008000″ link_color=”#0088FF” link_align=”left” ]Question: Who is Luke Skywalker’s father?
Answer: Darth vader![ /su_expand ]

Note: In my examples I have to put a space before and after [ to prevent Shortcodes Ultimate from thinking I’m entering a command.

Use the Shortcodes builder

Shortcodes Ultimate adds a new button to the WordPress post editor and clicking it displays a menu.

Shortcodes Ultimate in WordPress

Select an item on the menu and shortcode builder form makes it easy to add effects to posts. The effect I have described above is Expand.

Shortcodes Ultimate editor in WordPress

You don’t need to remember the parameters when using this shortcode builder, you just fill in a form, which makes it much simpler.

I could have shown you this at the start, but learning how shortcodes work gives you a greater understanding. After inserting the code, if you need to change it you will know which bit to edit without having to go through the shortcode builder all over again.

 

Join RAW Guides online courses to make your site a success.


Be the first to comment

Leave a Reply

Your email address will not be published.


*