Comments à la “click to appear” with jQuery

Question

I have a WordPress blog and I'm trying to make that when a user clicks on "Show comments" the comments section appears with a simple animation.. I used

 <a href="#comments" id="showcomments">Show comments</a>

and then:

<script type="text/javascript">
jQuery(function(){
jQuery("#showcomments").click(function () {
    jQuery("#comments").slideToggle("slow");
});
});
</script>

<div id="comments" style="display:none">
    ......
    </div>

This is what I achieved (scroll down to "Commenta l'articolo!"): http://multiformeingegno.it/riflessioni/topserver-server-virtuali-made-italy/

As you can see if I click the link the comments section appears but the browser doesn't go down to the start of the section, you have to manually scroll down.. can you help me? Thanks!! ;)

Answer 1

You can do it with Jquery as well.

http://demos.flesler.com/jquery/scrollTo/

Or you could use an anchor '#'

Answer 2

Above DIV id "comments", put the following code:

<a name="comments">

You need to point where you want the user to go after the click.

Good luck! :)

Answer 3

you need to put the target anchor in the comment box

<a name="comment" ></a>

This is what your link is looking for to focus on

Answer 4

Use document ready

<script type="text/javascript">
$(document).ready(function(){
    $("#showcomments").click(function () {
      $("#comments").slideToggle("slow");
    });
});
</script>