How to Add a Spoiler or Hide/Show Button in Blogger

Impressing you visitors is important for driving more traffic to your blog. Everybody knows that content is the king and its important to write good and interesting content. You can also impress your visitors by adding special effects to your blog posts and today we're going to share one of them. This effect is known as spoiler or hide/show effect. This effect displays a button with text, clicking it will expand the content and on clicking it again will hide the content. It uses a simple script and you can use it anywhere. You can hide whatever you want an image, code, text etc. So today in this tutorial we'll learn that How to Add Spoiler or Hide/Show Button in Blogger. See it in action, click the button below :-

ADD YOUR HIDDEN CONTENT HERE

How to Add Spoiler or Hide/Show Button in Blogger

Adding this button/spoiler to a blogger post is extremely easy, simply Copy (Ctrl+C) the below code >> In the blogger post editor click on HTML tab and Paste (CTRL+V) it where you want to add this button.

<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>

Customization:
Replace ADD YOUR HIDDEN CONTENT HERE with the content that you want to show on click
You can also replace button text i.e Show/Hide
That's it, you're done.

From Editors Desk

We hope this article has helped you in learning How to Add Spoiler or Hide/Show Button in Blogger. Share it with your friends and don't forget to subscribe us :-)

Share This:

Tags:

Blogger Tricks Buttons CSS Tricks

• Prevoius
• Next