Make a spoiler simple attractive responsive for blogger using jQuery

Hello friends! Howdy? It’s been a long time since i published a post. I don’t know why! But now i will try to post regularly.

Spoiler is very cool and visitor attractive for your Site. A spoiler can be used for many terms it can be an useful utility for your BLOG. Plus it’s attractive and super responsive design will attract more visitors.

Simply Follow These Steps

First go to Blogger Dashboard > Select Your Blog > Theme > Edit HTML
Add this code before </style> or ]]></b:skin>.


/* Spoiler Button By LimonSeo */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

Now add this Javascript before </body>.


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

Note That! You will need jQuery Script to run the JS so if you don’t have install before </body>. If you have already installed Ignore.


<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Congratualtions You have successfully completed the installation process. To Show the spoiler on post or page add the below code.


<div id='soore-spoiler'>
<button>Open Spoiler</button>
</div>
<div id='soore-spoiler-content'>
Spoiler Content
</div>

See The Demo If You Want!

Watch Demo

So that was all. I will be back soon with another existing post. Thank You