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!
La 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>
Autres conseils
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");
}