jQuery para baixo a corrediça do primeiro comentário a página inteira

Question

Eu tenho uma lista de 10 comentários em uma página. Suas alturas não são conhecidos porque isso depende do conteúdo dos comentários.

Qual seria a melhor maneira de mostrar apenas o primeiro comentário até que você clique em um botão, em que ponto ele desliza para baixo para revelar todos os 10 comentários na página? Então, por padrão, o usuário só vê um comentário, até que ele clica no botão Ver mais comentários, em que ponto ele vai deslizar para baixo para revelar todos eles.

Obrigado!

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

Se você tem um botão com o viewMoreButton classe e um div com o moreComments classe que contém o resto dos comentários, então você pode usar este script:

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

Ele também remove o próprio botão, mas se você quiser o botão para alternar os comentários, faça o seguinte:

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