Don't Miss

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

By Zohaib Liaqat - 31 Comments
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 :-

How to Add Spoiler or Hide/Show Button in Blogger

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 :-)

31 comments to ''How to Add a Spoiler or Hide/Show Button in Blogger"

ADD COMMENT
  1. Hi:

    Somewhat 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?

    ReplyDelete
  2. Are you sure that you added the links @ ADD YOUR HIDDEN CONTENT HERE place.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Thank 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!

    ReplyDelete
  5. how to add picture in the spolier

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thank you so much i really want this from few days now i got it perfect.

    ReplyDelete
  8. I 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
  9. @edlorens, I use blogger and it works for me. Is there some way I can help you?

    ReplyDelete
    Replies
    1. Gretchen I would really like your help, the button to show/hide appears but nothing happens when I click on it.

      Delete
    2. I'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.

      Delete
  10. Please tell me how to add a background button color or add an image for it.

    ReplyDelete
  11. Thank you! This is so helpful to me as a newbie blogger.

    One 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.

    ReplyDelete
  12. God bless you tremendously; I've actually been searching for this for Ages....wow

    ReplyDelete
  13. Is there a way to make the button appear _before_ the hidden content when said content is revealed?

    ReplyDelete
  14. This really nice...thanks i implement it already on ABABIOBLOG It really nice

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. I'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.

    ReplyDelete
  17. It's 2020 and your code helped me ! seriously i was looking for this one for along time . Thank you. Please visit my page also .

    ReplyDelete
  18. hi 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

    ReplyDelete
  19. Good 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

    ReplyDelete
  20. I surely didn’t know that. Learnt one thing new right now! Thanks for that. ipad template

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. For 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

    ReplyDelete
  23. Thank you for providing this content. I appreciate the time and effort that you have put into creating it.

    ReplyDelete
  24. Your 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!
    Best Root Canal Treatment In Faridabad

    ReplyDelete
  25. "Thank you for sharing this useful information, I will regularly follow your blog. Excellent post!
    If 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."

    ReplyDelete
  26. "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
    Their 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."

    ReplyDelete