SO - 32732737

by Arun P Johny

HTML

<div class="cat-links">
    <ul class="post-categories">
<a href="javascript:void();" class="add-com"> Post Comment one</a>

        <ol class="commentlist" style="margin-left:0px; margin-bottom:0px;">
            <li class="comment">
                <article class="comment-body">
                    <footer class="comment-meta">
                        <div class="comment-author vcard">
                            <img alt="" src="http://1.gravatar.com/avatar/48688ec7420d0e8607e33559f96e5564?s=96&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/48688ec7420d0e8607e33559f96e5564?s=192&amp;d=mm&amp;r=g 2x" class="avatar avatar-96 photo" height="96" width="96"> <b class="fn"><a href="">test</a></b>  <span class="says">says:</span> 
                        </div>
                        <!-- .comment-author -->
                        <div class="comment-metadata"> <a href="">
          <time datetime="September 22, 2015 at 5:11am"> 		  Tue, Sep 22, 2015		  
		  </time>
          </a> 
                        </div>
                        <!-- .comment-metadata -->
                    </footer>
                    <!-- .comment-meta -->
                    <div class="comment-content">
                        <p>sana comment</p>
                    </div>
                    <!-- .comment-content -->
                </article>
                <!-- .comment-body -->
            </li>
            <li class="comment">
                <article class="comment-body">
                    <footer class="comment-meta">
                        <div class="comment-author vcard">
                            <img alt="" src="http://0.gravatar.com/avatar/9bd5fc32d53bf59f73fe11ce058bed4b?s=96&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/9bd5fc32d53bf59f73fe11ce058bed4b?s=192&amp;d=mm&amp;r=g 2x" class="avatar avatar-96 photo" height="96" width="96"> <b class="fn"><a href="">admin</a></b>  <span class="says">says:</span> 
                        </div>
             ...

CSS

.category-commentform {
    display:none
}

JavaScript

jQuery('.add-com').toggle(function () {
    var $form = jQuery(this).closest('div').find('.category-commentform').slideDown();
    var body = jQuery("html, body");
    $('html, body').stop().animate({
        scrollTop: $form.offset().top
    }, 2000);
    return false;
}, function () {
    jQuery(this).closest('div').find('.category-commentform').slideUp();
    return false;
});