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 :-
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.
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.
Hi:
ReplyDeleteSomewhat new to setting up a blogger blog. I copied the text into the HTML part of the blog setup. The button shows when I go back to compose, but when I click on it, nothing opens..tried a few times..I have pasted into HTML with links for youtube and google maps, so I think I am doing that part right. Any suggestions for getting button to work?
Are you sure that you added the links @ ADD YOUR HIDDEN CONTENT HERE place.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThank you for this code! I'm using it in my blog and it works great. I have one question. When I click the show/hide button when I want to hide text after I have shown it, I lose my place on the page. It automatically scrolls me down the page. I have several show/hide buttons so I would like the reader to stay in the same place so they don't have to search for where they just were. Do you have any ideas to make this work? Thanks!
ReplyDeletehow to add picture in the spolier
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you so much i really want this from few days now i got it perfect.
ReplyDeleteI tried many times over few hours. Very valuable widget if it could work. I got simple template with Blogger. I am getting every time button, but not my text, No -ADD YOUR HIDDEN CONTENT HERE . Not visible. Button unresponsive. If somebody could check or maybe give other variation of this read more/hide widget it would be great. Thanks.
ReplyDelete@edlorens, I use blogger and it works for me. Is there some way I can help you?
ReplyDeleteGretchen I would really like your help, the button to show/hide appears but nothing happens when I click on it.
DeleteI'm not sure if I can help you but I can try. I need to see your code so can you copy and paste it here. I'll compare it to mine to see if I can see the difference.
DeleteWow!
ReplyDeletePlease tell me how to add a background button color or add an image for it.
ReplyDeleteThank you! This is so helpful to me as a newbie blogger.
ReplyDeleteOne question: if I want two separate spoilers, how do I do it? I tried to just copy the code twice, around each of my spoilers, but when I click on the button only one shows up.
God bless you tremendously; I've actually been searching for this for Ages....wow
ReplyDeleteThanks for sharing
ReplyDeleteIs there a way to make the button appear _before_ the hidden content when said content is revealed?
ReplyDeleteThis really nice...thanks i implement it already on ABABIOBLOG It really nice
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI'm glad to have read such a great writing. Keep up the good job! Visit Lawrence Todd Maxwell on Scoop.it for interesting topics about real estate.
ReplyDeleteThanks, I did
ReplyDeleteIt's 2020 and your code helped me ! seriously i was looking for this one for along time . Thank you. Please visit my page also .
ReplyDeletehi and thanks for the actual blog post ive recently been searching regarding this specific advice on-line for sum hours these days as a result thanks ux design agency san francisco
ReplyDeleteGood website! I truly love how it is simple on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I’ve subscribed to your RSS which must do the trick! Have a nice day! ux san francisco
ReplyDeleteI surely didn’t know that. Learnt one thing new right now! Thanks for that. ipad template
ReplyDeleteThe information you are providing that is really good. Thank for making and spending your precious time for this useful information. Thanks again and keep it up. Accounting firms
ReplyDeleteThanks for sharing such a nice blog :
ReplyDeletemalwarebytes not opening on windows 10
repair malwarebytes windows hanging errors
Woohoo, Nice Article buddy. I’m gonna share this post with my friends now.
ReplyDeleteTop IAS Coaching in Mumbai
This comment has been removed by the author.
ReplyDeleteFor all those who want to understand digital marketing in an elaborate way, I would highly recommend them to have this blog a read. Well written!
ReplyDeletewebsite designing company in noida
Get Packers and Movers Jaipur List of Top Reliable, 100% Affordable, Verified and Secured Service Provider. Get Free ###Packers and Movers Jaipur Price Quotation instantly and Save Cost and Time. Packers and Movers Jaipur ✔✔✔Reviews and Compare Charges for household Shifting, Home/Office Relocation, ***Car Transportation, Pet Relocation, Bike SHifting @ Packers And Movers Jaipur
ReplyDelete