jqueryでulli折りたたみ

2015年3月23日更新 view: 1060 view

長すぎるリストを自動で折りたたみ、表示できるように

paginate 機能を使うまでもないけど、リストの数が多すぎて見づらい。
そんな時に使えるjavascriptをご紹介。

スポンサードリンク

仕様

  • ul li の数が指定数より多ければ
  • 自動的に折りたたみ
  • 折りたたみと同時に続きを読むボタンを自動作成

javascript

$(function () {

var read_more_option = {
max: 5 ,
btn: '<div class="t-c"><button class="btn btn-default read-more-all" type="button">続きを読む</button></div>'
};


$('.read-more').each(function (i, elem) {
hide_flag = false;
$(this).children("li").each(function (i, elem) {
if(i >= read_more_option['max']){
$(this).hide();
hide_flag = true;
}
});

if(hide_flag){
$(this).after(read_more_option['btn']);
}

});

$('.read-more-all').click(
function(){
$($(this).parent().prev()).children("li").show();
$(this).hide();
}
);

});

html

<ul class="media-list read-more">
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
<li>たろう</li>
</ul>

使い方

  • 上記のjavascriptとjqueryを読み出し
  • ul に read-more クラスをつける

たったこれだけで自動折りたたみが実現できます。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

7月19日 ( 金 ) にアクセスが多かった記事はこちら!