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!
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
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
ReplyDeleteThanks for sharing such a nice blog :
ReplyDeletemalwarebytes not opening on windows 10
repair malwarebytes windows hanging errors
This comment has been removed by the author.
ReplyDeleteFor instance, you'd be shock the number of people think they need an encased gathering room just to find that their customers are more alright with a casual gathering region. amazon/mytv
ReplyDeleteThank you for providing this content. I appreciate the time and effort that you have put into creating it.
ReplyDeleteYour content is very informative. It's easy to follow and understand. I like the way you break down the different topics so that everyone can understand them. Keep up the great work!
ReplyDeleteBest Root Canal Treatment In Faridabad
"Thank you for sharing this useful information, I will regularly follow your blog. Excellent post!
ReplyDeleteIf you're looking for a user-friendly machine that can handle your plasma cutting needs, then you'll want to check out the Hypertherm Plasma Consumable.Hypertherm Consumables Supplier This machine is designed to be easy to use, so you won't have any trouble getting it up and running. Plus, it's built to last, so you can be confident that it will stand up to whatever you throw at it."
"Thank you for sharing this useful information, I will regularly follow your blog. Excellent post!Hypertherm consumables are a critical part of the cutting process, and we offer a variety of options to suit your specific application needs. Hypertherm consumables is a great option. Hypertherm Consumables Supplier
ReplyDeleteTheir products are backed by a strong warranty and customer support team, so you can be confident in your purchase.Hypertherm's consumables are designed to deliver consistent performance and long-term reliability. If you're looking for a high-quality plasma cutter consumable, Hypertherm is a great option."