【jQuery】指定の要素数毎に自動で「続きを読む」ボタンを生成
使い所がかなり限られるコードですが、たとえば1ページ内に同じ要素をリストで大量に並べるときに、ユーザーに分割して見せたい場合などに使えそうなコードを共有します。
指定した要素の数ごとに少しずつ表示させます。自動で追加される「続きを読む」ボタンを押せば、分割した数ごとに順次表示されるようになります。
DEMO
まず詳しい動きについては下記の動作デモページを用意しましたのでご確認ください。jQuery本体のバージョンは3.3.1を使用しているので、古いバージョンによっては動かない可能性もあります。
動作デモページではリスト要素を3件ずつ自動で分割するようになっています。このあとご紹介するコードをそれぞれ順番にコピーして、ご自分の環境に合わせて修正してみてください。（またはデモページのソースをそのままコピーしてください。）
設置方法
jQuery本体の読み込み
CDNで配布されています。下記コードをそのまま＜head＞内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery実行コード
こちらのコードをjQuery本体よりも下部に記述します。
<script>
$(function(){
//分割したい個数を入力
var division = 3;
//要素の数を数える
var divlength = $('#list .li').length;
//分割数で割る
dlsizePerResult = divlength / division;
//分割数 刻みで後ろにmorelinkを追加する
for(i=1;i<=dlsizePerResult;i++){
$('#list .li').eq(division*i-1)
.after('<span class="morelink link'+i+'">続きを読む</span>');
}
//最初のli（分割数）と、morelinkを残して他を非表示
$('#list .li,.morelink').hide();
for(j=0;j<division;j++){
$('#list .li').eq(j).show();
}
$('.morelink.link1').show();
//morelinkにクリック時の動作
$('.morelink').click(function(){
//何個目のmorelinkがクリックされたかをカウント
index = $(this).index('.morelink');
//(クリックされたindex +2) * 分割数 = 表示数
for(k=0;k<(index+2)*division;k++){
$('#list .li').eq(k).fadeIn();
}
//一旦全てのmorelink削除
$('.morelink').hide();
//次のmorelink(index+1)を表示
$('.morelink').eq(index+1).show();
});
});
</script>
このコードの簡単な解説
まずコードを導入する環境によって修正が必要な部分は、5行目の”var division = 3;”の数字を分割したい要素数に変更します。
加えて、14行目の.after()関数内にあるHTMLを必要に応じて修正します。こちらが自動で追加される「続きを読む」ボタンの要素となります。
HTML
上記のデモページでlist01〜10と表示されるリスト部分です。クラス名などは適宜変更してください。
<div id="list"> <div class="li">list01</div> <div class="li">list02</div> <div class="li">list03</div> <div class="li">list04</div> <div class="li">list05</div> <div class="li">list06</div> <div class="li">list07</div> <div class="li">list08</div> <div class="li">list09</div> <div class="li">list10</div> </div><!-- #list end -->
CSS
こちらも既存クラスなどの状況に合わせてカスタマイズしてください。
#list{
width:100%;
margin-bottom:30px;
}
#list .li{
padding:10px;
border:1px solid #dfdfdf;
background:#efefef;
margin-bottom:10px;
}
/* morelinkボタンのスタイル（お好みで） */
.morelink{
display:block;
max-width:240px;
margin:20px auto;
padding:10px 20px;
background:#ff9900;
border:2px solid #fff;
color:#fff;
text-align:center;
border-radius:5px;
}
.morelink:hover{
cursor:pointer;
border:2px solid #ff9900;
background:#fff;
color:#ff9900;
}
まとめ
冒頭でも書いたように使う機会はかなり限られるコードですが、たとえばネットショップで商品一覧が大量に並んでいる場合や、「よくある質問」でＱ＆Ａがずらっと並んでいるときなどに、ユーザーに少しずつ見せることでユーザビリティの改善に役立つ可能性はあります。良かったら是非使ってください。
また今回のコードはリストをすべて開ききった場合「続きを読む」ボタンが消えるようになっていますが、「元の状態に戻す」ボタンなどを追加できれば尚良いと、作っているうちに思ったのでまた別の記事で更新しようかと思います。
コードの間違いや、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。