スポンサーリンク

readmore.jsで記事を折りたたむ

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>

 

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


この記事のトラックバックURL: