Putting a Show - Hide Effect or Content Spoiler in Blogger

I have already shared an article on how to add read more in blogger. But in this article I'm gonna show a trick on how to "show more or show less" a long article  in a certain page or post. I've learned the initial  codes from Greenlava and I modified it to make this tweak more fitted to newbie bloggers. You can utilize the code in pages, posts and even in widgets.

Live Demo

Here are the features of this Content Spoiler

• The button text changes accordingly. The "show more" will appear if it is in the hide state or the texts are hidden and "show less" will appear if it is in the show state mood.
• You can use this spoiler in multiple manner  even in a single page.
• The spoiler will not work in Internet Explorer .

Putting a Show - Hide Effect or Content Spoiler in Blogger

Step 1. Log-in to your Blogger account
Step 2. Click the Template button ( have a back - up of your template)
Step 3. Hit the Edit HTML button
Step 4. Look for the code below

</head>

Step 5. And just above that code </head> paste the following css code

<style type='text/css'>
/* animated spoiler CSS by Bloggingtipsandtrix.blogspot.com */
.spoilerbutton {
display:block;
margin:5px 0;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler &gt; div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value=&quot;Show - More&quot;] + .spoiler &gt; div {margin-top:-100%;}
.spoilerbutton[value=&quot;Show - Less&quot;] + .spoiler {padding:5px;}
</style>

Step 6. Save your template!
Everytime you want to use the content spoiler, just paste the HTML (code) below in your blogger editor's page (be sure to switch your blogger editor page in HTML mode)

<input class="spoilerbutton" onclick="this.value=this.value=='Show - More'?'Show - Less':'Show - More';" type="button" value="Show - More" />

<div class="spoiler">
<div>
Your text here that you want to hide
</div>
</div>

Customization

• You can change the background color of the "Show - More/Show - Less" or the content spoiler button by replacing the hexadecimal color f5f5f5 with your own. You can use our color code generator.
• Replace the text Show - More with "Show"  and Show - Less with "Hide" or any text that you want, both in css code (step 5) and in HTML (below step 6 code).
• You can adjust the speed of the texts that you hide in getting in and out  by adjusting the texts in green (0.2s). The unit is in seconds (s), therefore if you will lower the number from 0.2 s to 0.1s the speed will increase and if you increase the number from 0.2s to 0.3s, 0.4s, 0.5s, 0.6s, 0.7s the speed of getting in and out will  decrease.

If you have some questions regarding this post, kindly drop it at the comment section below. Thank you and
God Bless Us All!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook