Search code examples
jquerysliding

jQuery slide down from first comment to full page

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!

Solution

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