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

"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>