jQuery deslice hacia abajo desde el primer comentario a página completa

Question

Tengo una lista de 10 comentarios en una página. Sus alturas no se conocen, ya que depende del contenido de los comentarios.

¿Cuál sería la mejor manera de mostrar sólo el primer comentario hasta que haga clic en un botón, momento en el que se desliza hacia abajo para mostrar todos los 10 comentarios en la página? Lo que por defecto, el usuario sólo vería un comentario, hasta que se hace clic en el botón Ver más comentarios, momento en el que se deslizará hacia abajo para mostrar todos ellos.

Gracias!

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

Si usted tiene un botón con el viewMoreButton clase y un div con el moreComments clase que contiene el resto de los comentarios, a continuación, puede utilizar este script:

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

También elimina el botón de sí mismo, pero si desea que el botón para cambiar los comentarios, haga lo siguiente:

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