Home
Blogging

How to create a Content spoiler or show-hide effect?

How to create a Content spoiler or show-hide effect?
show and hide content

In many Blog posts we use source paragraph or quote exactly what was published. In this case we can use content spoiler. Because content spoiler help to hide and show specific paragraph. Sometimes optional things we can show with content spoiler and also use in case of widget code block presentation with show and hide option. This effect is also known as a spoiler or a peek-a-boo. Though I have already share Image spoiler widget and in this tutorial I will show you the way about content spoiler.


Live Demo

 To add content spoiler in your Blog just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

#content-spoiler {text-align:center;}
#content-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#content-spoiler button:hover, #content-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}

Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 Copy the script from below and Paste it above/before </head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//Spoiler
$(document).ready(function(){$("#content-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

Step 7 hit the Save template button.

Customization

  • If you template already contain latest Jquery then you don't have to add the below jquery file.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

How to make it work?

For using this Custom button you have to add the code in HTML view while writing a Blog post. Just write a post and from Post Editor Select HTML mode. Now add the below code-

<div id="content-spoiler">
<button>Content Spoiler</button></div>
<div id="spoilerpanel">
ADD TEXT HERE
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
ADD TEXT HERE
</div>
</div>

Customization

  • To add Text on Spoiler just replace ADD TEXT HERE with your image link
  • To add Images on Spoiler just replace IMAGE URL HERE with your image link

content spoiler



Now simply publish your post and see a content spoiler button has appeared. So click on the button and content will display instantly. 

12 comments

  1. hey bro How are you? Very Useful I have edited and made my own customized spoiler but this is not working on mobile unfortunately. so can you provide me a java script so that it should work in mobile too.
    • I think your mobile template is active for this reason it is not showing. From template - gear icon and select no, show desktop template on mobile device. I hope it will work.
  2. Assalam-O-Alikum Fazle! i have a problem with this would you like to help me?
    Your widget is superb and it works great but this not work if i insert html code twice in post html editor.Its work only if i insert this html code only one time.But i wanna insert it approximately 5,6th time in same post.How is it possible?
    • Just repeat the below code 5/6 times

      <div id="content-spoiler">
      <button>Content Spoiler</button></div>
      <div id="spoilerpanel">
      ADD TEXT HERE
      <div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
      ADD TEXT HERE
      </div>
      </div>
  3. Hello Bro how To make it work in Wordpress
    • Hi Nauman.. You can simply use ''Inline Spoilers'' plugins for your WordPress blog..

      https://wordpress.org/plugins/inline-spoilers/
  4. only one spoider in one page :(( . 2 spoider not active?
    • Hi Kimochi, I am not clear what exactly you want to say? Is there 1 picture is displaying on spoiler or you are trying to add 2 spoiler in one page. It is but confusing. for adding 2 spoiler you must change the code in CSS and HTML part. For example

      CSS Part

      <style>
      #content-spoiler1 {text-align:center;}
      #content-spoiler1 button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transformpercase;border:none;font-size:14px;transition:all .3s ease-out}
      #content-spoiler1 button:hover, #content-spoiler button:focus {outline:none;opacity:1;color:#fff;}
      #spoilerpanel1 {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
      #spoilerpanel1 {padding:24px;display:none;}
      #spoilerpanel1 img {background:#f5f5f5;margin:10px auto;}
      </style>

      HTML Part


      <div id="content-spoiler1">
      <button>Content Spoiler</button></div>
      <div id="spoilerpanel1">
      ADD TEXT HERE
      <div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
      ADD TEXT HERE
      </div>
      </div>
  5. Not Working after adding the updated css and changing the id of the respected spoiler..

    and also mention where to place the code..
Go Up