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

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

11
data:blog.title
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. 
How to create a Content spoiler or show-hide effect?
4 Stars stars - "How to create a Content spoiler or show-hide effect?" In many Blog posts we use source paragraph or quote exactly what was published. In this case ...

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.

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>

Thanks Alot,Really Appreciated.

Admin Thanks For Sharing,but the situation is same.Nothing happen.You can take a look here so you can understand properly http://templatesburg.blogspot.com/p/faqs-about-blogger.html thanks.

Got the solution.. just add the following code

<style>
#content-spoiler1 {text-align:center;}
#content-spoiler1 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-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>

<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-spoiler1").click(function(){$("#spoilerpanel1").slideToggle("normal")})});
</script>


<br />
<div id="content-spoiler1">
<button>Content Spoiler</button></div>
<div id="spoilerpanel1">
This means blogger may not compatible in our current Browsers. But Google has provided complete list of Browsers to get best experience from Blogger. The list has given below-

<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-eIoPO2_sBbE/UvnhhJrxDbI/AAAAAAAAHAM/5_Lxiuo8fgE/s1600/domain_registration_and_web_hosting.png" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-eIoPO2_sBbE/UvnhhJrxDbI/AAAAAAAAHAM/5_Lxiuo8fgE/s1600/domain_registration_and_web_hosting.png" style="border: none;" /></a></div>


In this chart we can see Google Chrome is giving better user experience in All operating system. Safari 4+ and Internet Explorer 9 and 10 both version having poor compatibility. For best results, you should turn off Compatibility View in Internet Explorer 9. Comparatively Firefox support on most of the operating system except Mac OSX 10.3.9 and its former versions.
</div>
</div>
</p>
<div class='clear'></div>
</div>
</div>
</div>


If you want to add more spoiler then just copy the above code and replace all

content-spoiler1

spoilerpanel1

with

content-spoiler2

spoilerpanel2

similarly

content-spoiler3

spoilerpanel3

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/

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>

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *