jqueryを使用したシンプルな「もっと見る」ボタンの実装

実装したもの

See the Pen Untitled by yoshida (@yoshi090) on CodePen.

シンプルな箇所

・「.c5-banner__content」のdivを加えるだけでコンテンツを追加できる。わざわざ「もっと見る」部分のコンテナを作成する必要がない。

index.html

<div class="c5-banner__content">
  <p>Content 1</p>
</div>

・「もっと見る」部分のコンテナの数が設定した数より少なければ「もっと見る」ボタンが非表示になる。下はコンテナの数が4つ以上なら「もっと見る」ボタンを表示する。

page.js

morenum1 = 3;
if(contentNum1 > morenum1){
 //４つ目以降のコンテンツを隠す
 $('.js-banner1 .c5-banner__content:nth-child(n+' + (morenum1 + 1) + ')').addClass('js-more1').hide();
  moreContents(btn1,content1);
}else{
   //コンテンツが３つ以下ならボタンを隠す
   $(btn1).hide();
}

参考