jQuery scivolare giù dal primo commento a pagina intera

Question

Ho una lista di 10 commenti su una pagina. Le loro altezze non sono noti perché dipende dal contenuto dei commenti.

Quale sarebbe il modo migliore per mostrare solo il primo commento fino a quando si fa clic su un pulsante, a quel punto scivola verso il basso per rivelare tutti i 10 commenti nella pagina? Così per impostazione predefinita, l'utente vedrebbe solo un commento, fino a che non fa clic sul pulsante Commenti Visualizza altre, a quel punto scivolerà verso il basso per rivelare tutti loro.

Grazie!

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 si dispone di un pulsante con il viewMoreButton classe e una div con l'moreComments classe che contiene il resto dei commenti, allora è possibile utilizzare questo script:

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

Si rimuove anche il pulsante stesso, ma se si desidera che il pulsante per attivare o disattivare i commenti, fare questo:

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