Blogger Ever

How to slide up the widget content when heading is clicked in Blogger by using Jquery?

How to slide up the widget content when heading is clicked in Blogger?

"Nothing is impossible",it is not written in many dictionaries but,in the dictionary of web-designing that is not the case.I've seen on some free Blogger templates that these type of sliding headings get famous so written a Jquery to make this sliding stuff.So lets begin with it,
First let me tell you that it is a Jquery snippet if you do not have Jquery library in your template then follow the step below,else skip this step.
  • Add the following line just after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>
Now  these steps should be followed by everyone.
  • Add the following script before ]]></b:skin>

<script>
  $(document).ready(function(){
    $('.widget').find('h2').click(function(){
$(this).toggleClass('sliding');
      if($(this).attr('class')=='sliding'){
$(this).next('.widget-content').slideUp(200);
      }
      else{
$(this).next('.widget-content').slideDown(200);
      }
});
});
  </script>

  • Save template and see the effect.
  • If it do not work then check that your Jquery is inserted or no else our comments are always welcoming you. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.