jQuery
【jQuery】長いテキストブロックを折りたたんで展開するReadmore.js
May 13, 2017

Readmore.jsは”Read more” と “Close”リンクで長いテキストブロックを折りたたんで展開するための軽量jQueryプラグイン。jQueryは1.9.1以降が必要になります。
HTML
<script src="/node_modules/readmore-js/readmore.min.js"></script>
アニメーションの速度など
$('article').readmore({ speed: 75, lessLink: '<a href="#">Read less</a>' });
speed: 100
collapsedHeight: 200
heightMargin: 16
moreLink
lessLink:
embedCSS: true
blockCSS: 'display: block; width: 100%;'
startOpen: false
beforeToggle: function() {}
afterToggle: function() {}
blockProcessed: function() {}
beforeToggle
側
trigger
element
expanded
blockProcessed
側
element
collapsable
$('article').readmore({ afterToggle: function(trigger, element, expanded) { if(! expanded) { // The "Close" link was clicked $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); } } });
$('article').readmore('destroy');
特定の要素を指定
$('article:first').readmore('destroy');
$('article:nth-of-type(3)').readmore('toggle');
selector + [data-readmore-toggle], selector[data-readmore] { display: block; width: 100%; }
上書き
$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});
無効にする
$('article').readmore({embedCSS: false});
body { font: 16px/1.5 sans-serif; } /* Show only 4 lines in smaller screens */ article { max-height: 6em; /* (4 * 1.5 = 6) */ }
メディアクエリを使用して、表示される行数を変更
/* Show 8 lines on larger screens */ @media screen and (min-width: 640px) { article { max-height: 12em; } }
MIT