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. 
Go Up