jQuery скользит вниз от первого комментария к полной странице

Question

У меня есть список из 10 комментариев на странице.Их высота неизвестна, потому что это зависит от содержания комментариев.

Каков наилучший способ показывать только первый комментарий до тех пор, пока вы не нажмете кнопку, после чего она соскользнет вниз, чтобы показать все 10 комментариев на странице?Таким образом, по умолчанию пользователь будет видеть только один комментарий, пока не нажмет кнопку Просмотреть дополнительные комментарии, после чего она соскользнет вниз, чтобы показать их все.

Спасибо!

Answer 1

jQuery - 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

Если у вас есть кнопка с классом viewMoreButton и a div с классом moreComments содержащий остальные комментарии – тогда вы можете использовать этот скрипт:

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

Это также удаляет саму кнопку, но если вы хотите, чтобы кнопка переключала комментарии, сделайте это:

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