一覧ページに設置するもっと見るボタン

phpの一覧出力の間に設定する。
動的・静的に関わらず使用できる。

■html

<ul class="worksList">
  <?php $cnt = 1; ?>
  <?php foreach ($data as $value) : ?>
  <?php include (HTTP_PATH . '/parts-list-works.php' ); ?>
  <?php
    //割り込む個数とソースを記述
    if ($cnt % 10 == 0) {
        echo '</ul>';
        echo '<p class="moreBtn"><span>もっと見る</span></p>';
        echo '<ul class="worksList load">';
    }
  ?>
  <?php $cnt++; ?>
  <?php endforeach; ?>
</ul>

■js

function listLoad(){
    $('.worksList.load').css('display','none');
    $('.moreBtn').nextAll('.moreBtn').css('display','none');
    $('.moreBtn').on('click', function() {
        $(this).css('display','none');
        $(this).next('.worksList').slideDown('fast');
        $(this).nextAll('.moreBtn:first').css('display','block');
    });
}

参考サイト

Gimmick log

jQuery-もっと見るボタンで要素を表示する

http://gimmicklog.main.jp/jquery/67/