jQuery scivolare giù dal primo commento a pagina intera
Domanda
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!
Soluzione
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>
Altri suggerimenti
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");
}