Backlinko is the site for SEO training and link building strategies. Its creator, Brian Dean, has developed a huge following for his constant delivery of high-quality, actionable content.
However, for his latest post, Brian wanted to go even further and have pieces of content (techniques, in his case) that were hidden/revealed based on user-selected criteria.
Pretty cool in itself, as an idea, but even cooler if it were in a plugin so that he could customise it himself, and add/edit/delete content as he pleased…
Enter the “Hide/Reveal Plugin”.
Before reading this write-up, take a look at the post now:
For once you’re done, here’s the breakdown of what happens:
This part needed to be easy to use. Brian wanted to edit the content himself, without developers. Because of this, we developed a super-easy plugin that works in the following manner:
Users can create a new Hide/Reveal instance (ie, different instances for use in different posts) :
And edit/delete content from the same screen:
Once finished (for the very end) the auto generated shortcode can be copy/pasted for use in the post:
Hide/Reveal Instance screen
To edit a particular Hide/Reveal instance, the Settings button would just be clicked, as per the image further up, taking the user to this screen:
From here, we have the ability to make changes to all aspects of the Hide/Reveal instance. We have top-level categories (corresponding to headings when the post is viewed by users), and sub-categories (corresponding to the orange buttons when the post is viewed by users), and pieces of content (corresponding to the techniques in the post).
All of these things can be modified and deleted, as well as new ones added.
All of this comes together so that the editing/curation experience is extremely easy for the user (Brian). He tells us that it works flawlessly.
The front end is as you see live on the post. By default, all categories are checked (with all content being shown), and as categories are un-checked, the number of techniques on display diminishes.
This was achieved via jQuery. It took a while.
“How?” you (may) ask..
The client-side functionality was possible through using ‘data’ attributes on each technique.. and the jQuery selectable interaction.
When an orange button is pressed, a function runs which gets all currently-selected categories into an array. Next, each technique is iterated over, and its categories are also put into an array. For each item in this array, if it is in the collection of currently-selected categories, the technique is ‘revealed’ – otherwise it is ‘hidden’.
Through our plugin development work, Brian was (and is) able to administer his Hide/Reveal content with ease, and create new Hide/Reveal instances for future use.
This write-up was created for a number of reasons. One of these was to plug our plugin development work.
Interested? Get in touch.