jquery - jQueryは最初のコメントからページ全体にスライドダウンします

Question

1ページに10件のコメントのリストがあります。コメントの内容に依存するため、高さは不明です。

ボタンをクリックするまで最初のコメントのみを表示する最良の方法は何でしょうか。ボタンをクリックすると、ボタンが下にスライドして、ページ内の10個のコメントすべてが表示されます。したがって、デフォルトでは、ユーザーは[他のコメントを表示]ボタンをクリックするまで、コメントを1つだけ表示します。クリックすると、下にスライドしてすべてのコメントが表示されます。

ありがとう！

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

viewMoreButtonクラスを含むボタンと、残りのコメントを含むクラスを含むボタンがある場合div、moreComments次のスクリプトを使用できます。

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

ボタン自体も削除されますが、ボタンでコメントを切り替えたい場合は、次のようにします。

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