jQuery glisse du premier commentaire à la pleine page

Question

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

Quelle serait la meilleure façon de montrer le premier commentaire seulement jusqu'à ce que vous cliquiez sur un bouton, à quel point il glisse vers le bas pour révéler tous les 10 commentaires dans la page? Ainsi, par défaut, l'utilisateur ne voit qu'un seul commentaire, jusqu'à ce qu'il clique sur le bouton Afficher plus de commentaires, à quel point il va glisser vers le bas pour les 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 classe viewMoreButton et div avec la classe moreComments 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"); 
}