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.
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 ]
How does this look on the web page? As a link like this:
Show more
And when it is clicked, it changes to:
This text is hidden on the page and contains some content you don’t want the reader to see unless they click a link. You can even hide it again
Show less
You can style the text as you like and I made it italic, but any formatting can be used. Images can be hidden too, so you can hide an image on a web page and then show it only when the reader clicks the Show more link.
See the height=”0″ in in the code [ su_expand height=”0″ ]? This is the amount of the hidden item to show and a zero means show 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 ]
I wanted to show the first line of text and set the height to the
Show more
Clicking the Show more link would reveal the complete hidden item:
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.
Show less
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 ]
Question: Who is Luke Skywalker’s father?
Reveal the answer
Note: In my examples I have to put a space before and after [ to prevent Shortcodes Ultimate from thinking I’m entering a command.
Explore Shortcodes Ultimate
If you know the shortcode you need, you can simply add a Shortcode block in the Gutenberg post editor. Click the Plus, find the Shortcode block and click it to insert it.
Just type the shortcode into the block.
You probably will not know the shortcodes off the top of your head and there are many of them and they are complicated, at least when you start to use all the available parameters and options. Select Shortcodes in the WordPress sidebar to view all the Shortcodes Ultimate features. It is convenient to open it in a new tab to avoid closing the post editor.
Select the item you want and shortcode builder makes it easy to see and add the optional features. The code you need is displayed in a box.
You don’t need to remember the parameters when using this shortcode builder, you can click in the Shortcode box and edit the code, replacing the default text and options with your own. All the options are listed under Shortcode options. When you are done, select all the code and copy and paste it into a Gutenberg Shortcodes block.
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.
