How to hide multiple contents in Blogger posts

We saw in a previous post how to show and hide a part of content using a button, in this post we will see how hide multiple parts of our post using a cickable text.

This is useful specialy for puzzle or educational blog where you have a post that contains questions and answers where you may want to hide the answers and show it only when you click on a text like "Show Answer".

This is a sample how it looks like:

Riddle1:

What 4-letter word can be written forward, backward or upside down, and can still be read from left to right?

Riddle2:

What kind of goose fights with snakes?
Show Answer >>>

When you click on "Show Answer" the hidden solution appear, this hidden part can also be a long text and can contains any kind of elements like photos or videos.

To hide multiple part of content in blogger post switch the editor to Html and past this code bellow  the visible part of your content:

<a  title="Click to show answer" type="text" onclick="if(document.getElementById('hidden1') .style.display=='none') {document.getElementById('hidden1') .style.display=''}else{document.getElementById('hidden1') .style.display='none'}">

Clickable text1

</a>

<div id="hidden1" style="display:none"> 

Hidden text1

</div> 

The text "Click to show answer" is the popup message that appear when you pass the mouse cursor over the clickable text.

When you add a second hidden text just repeat the code and change the word "hidden1" by "hidden2" or any other word you like.

I hope it was helpful, if you face any problem just leave a comment.


Post a Comment (0)
Previous Post Next Post