<div>テキスト1</div> <div>テキスト2</div> <div>テ。AtelierRoi"> <div>テキスト1</div> <div>テキスト2</div> <div>テ" />
アトリエロワ

MOREボタンで数件ずつ要素を表示wp

HTML

<div class="bloglist">
<div>テキスト1</div>
<div>テキスト2</div>
<div>テキスト3</div>
<div>テキスト4</div>
<div>テキスト5</div>
<div>テキスト6</div>
<div>テキスト7</div>
<div>テキスト8</div>
<div>テキスト9</div>
<div>テキスト10</div>
<div>テキスト11</div>
</div>
テキスト1 テキスト２ テキスト３ テキスト４ テキスト5 テキスト6

js(jquery)

$(function(){
  var show = 6; //最初に何枚表示するか
  var num = 3;　//何枚ずつ表示するか
  var contents = '.bloglist > div'; // 対象のlist
  $(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
  $('.more').on('click', function () {
    $(contents + '.is-hidden').slice(0, num).removeClass('is-hidden');
    if ($(contents + '.is-hidden').length == 0) {
      $('.more').fadeOut();
    }
  });
//件数全体より最初の表示件数が同じ、または少ない場合は .more を表示させない。
  var kosuu = $('.bloglist > div').length;
  if (show >= kosuu){
    $('.more').css('display','none');
  }
});

HOME > javascript > MOREボタンで数件ずつ要素を表示wp

javascript

javascript

+ More