WordPress: Show/hide text


Here in this post we take a look on some methods to make parts of a post or page content invisible.

The first approach offers a link to the user, for example “Click to see details”, which allows the user to click on the list and expand its hidden content to see more infos.

The second approach is quite different. Here we show or hide post or page content depending on role of the user logged in. Here there in nothing the user can do to show or hide hidden text, the user either see it or not depending on the HTML code we have entered in the post or page.

Click to see more infos method

This approach used the “Ultimate Blocks” plugin. So make sure that you have this plugin installed. Once you have installed it, make sure to activate the plugin.

Next, go to the post/page where you would want to add an expandable (show/hide) text block. For example on a new post. Click on the [+] button for a new block and in the search field of the pop up dialog enter “expand”:

Click on [Expand] to add it to the post. Now you see a new element on your page which consists of two [+] buttons, one for [show more] and one for [show less]:

To add the “show more” text block click on the corresponding [+] button (1) and then click on [Paragraph] (2):

A new paragraph appears where you can enter the text which is shown to users in the hide state (when the more detailed text is still hidden):

For example we add here the following text: “C# programming language”

You can repeat the same actions by clicking on the second button, the show less [+] button and write a more details text which is at first hidden to the users, but which appears as soon as the use click on the show more text:

The result looks like this in initial state when the user has not yet expanded the hidden text:

And once the user clicks on the [show more] element the hidden text expands and becomes visible:

To collapse the hidden text again you can click on [show less] which is obvious.

Show/Hide text content based on user role

This approach uses the “Hide/Show Post/Page Content” plugin. So make sure that you have this plugin installed. Once you have installed it, make sure to activate the plugin.

This plugin allows you to control the visibility of parts of your post or page content based on the role of the logged user.

To see how it works, check the readme file of the plugin.

Here is an example showing how you can make the selected text (text contained within the soshsc tags) visible only to a user with administrator role:

[soshsc show="logged" role="administrator"]*This content is displayed only to administrators.*[/soshsc]

The nice thing is, that this tool works with Gutenberg Editor and also works with WordPress search mechanism, meaning you can search for your hidden text, which is quite nice if you want to add some hidden meta data to your text content for example.