Expand and Collapase Blogger Comment Box Using Jquery

Here is the new blogger comment box where you can hide,show,expand and collapse blogger comment using jquery.This widget can increase your blogger comments,because this make to see your blog visitor to “click here to add comment” and he may attempt that.When I saw this i directly went to code and added it my blog and thought to give this amazing script to my blog readers.You can see demo on my blog or see below image.

LIVE DEMO ▼

Part1

1.Blogger>Template

2.Back up your template

3.Edit Html->>Proceed->>Expand widgets Box

4.Search the </head> code using ctrl+f

5.Now before </head> paste the below code

<style type="text/css">
h2.trigger2 {
padding-left:50px;
margin:10px 0px 10px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9wtO2OfA7cgD2c9gcpCkx1Dj4AAbCEXijrp5x-81bl3Y6ijdIb3VKBz5GY6OAuQwL5RbPNwa-zh_FwOLAk7KJCzVHQgElU_AYYMFJXGfsGhvGQBlJ21XYKGQbYMcc6ENuQ21OZDCrWE/s1600/h2trigger.png) no-repeat;
height: 46px;
line-height: 46px;
width: 580px;
font-family:"Francois One";
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#fff;
float: left;
cursor:pointer;
}
h2.active {
background-position: bottom left;
}
.toggle_container2 {
padding-left:10px;
overflow: hidden;
clear: both;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    $(".toggle_container2").hide();
    $("h2.trigger2").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
    });
});
</script>

6.Now find the below code

<b:includable id='comment-form' var='post'>

7.Now paste the below code after above code

<h2 class='trigger2'>Click to Add a New Comment</h2>
<div class='toggle_container2'>
<div class='block'>

8.Now search for the </b:includable> and above it add below code

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.bloggertricksandtips.in/2012/07/expand-and-collapase-blogger-comment.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p> </div>
</div>

Pages