jQueryのプラグインであるreadmore.jsで、「続きを読む」を実装する。
注意点は、どうもjqueryのバージョンが1.*.*系列でないと動かないらしい。少なくとも3.3.1では動作しなかった。
<head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.0/readmore.js"></script> <script> $(document).ready(function() { $('.art').readmore({ speed: 1000, collapsedHeight: 100, moreLink: '<a href="#">続きを見る</a>', lessLink: '<a href="#">閉じる</a>' }); }); </script> </head>
<div class="art"> <p>ここに隠したい文章を入れる。</p> <p>この機能は頭を少し見せるので、collapsedHeightの数字でどれだけ隠すかを指定する必要がある。</p> </div>