jQuery slide down from first comment to full page

Question

I have a list of 10 comments on a page. Their heights are not known because it depends on the content of the comments.

What would be the best way to only show the first comment until you click a button, at which point it slides down to reveal all 10 comments in the page? So by default, the user would only see one comment, until he clicks the View More Comments button, at which point it will slide down to reveal all of them.

Thanks!

Answer 1

jQuery:

$(function(){
  $(".comments").not(":first").hide();
  $("#btnViewAll").click(function(){
    $(".comments").slideDown();
  });
});

HTML:

<input type="button" id="btnViewAll" value="Show All Comments" />
<div class="comments">1 comment</div>
<div class="comments">2 comment</div>
<div class="comments">3 comment</div>
<div class="comments">4 comment</div>
<div class="comments">5 comment</div>

Answer 2

If you have a button with the class viewMoreButton and a div with the class moreComments containing the rest of the comments–then you can use this script:

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideDown("fast");
    $(this).remove();
}

It also removes the button itself, but if you want the button to toggle the comments, do this:

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideToggle("fast");
}