jQuery glisser vers le bas du premier commentaire à la page complète

Question

J'ai une liste de 10 commentaires sur une page. Leurs hauteurs ne sont pas connus, car il dépend du contenu des commentaires.

Quelle serait la meilleure façon de montrer que le premier commentaire jusqu'à ce que vous cliquez sur un bouton, à quel point il glisse vers le bas pour révéler tous les 10 commentaires dans la page? Donc, par défaut, l'utilisateur ne verra un commentaire, jusqu'à ce qu'il clique sur le bouton Afficher plus de commentaires, à quel point il glissera vers le bas pour révéler tous.

Merci!

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 vous avez un bouton avec la viewMoreButton de classe et un div avec la moreComments de classe contenant le reste des commentaires, vous pouvez utiliser ce script:

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

Il supprime également le bouton lui-même, mais si vous voulez que le bouton pour activer les commentaires, faites ceci:

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