jQuery

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

May 13, 2017
readmore

Readmore.jsは”Read more” と “Close”リンクで長いテキストブロックを折りたたんで展開するための軽量jQueryプラグイン。jQueryは1.9.1以降が必要になります。

Install

HTML

<script src="/node_modules/readmore-js/readmore.min.js"></script>

Use

アニメーションの速度など

$('article').readmore({
  speed: 75,
  lessLink: '<a href="#">Read less</a>'
});

The options

  1. speed: 100
  2. collapsedHeight: 200
  3. heightMargin: 16
  4. moreLink
  5. lessLink:
  6. embedCSS: true
  7. blockCSS: 'display: block; width: 100%;'
  8. startOpen: false
  9. beforeToggle: function() {}
  10. afterToggle: function() {}
  11. blockProcessed: function() {}

The callbacks

beforeToggle

  1. trigger
  2. element
  3. expanded

blockProcessed

  1. element
  2. collapsable

Callback example

$('article').readmore({
  afterToggle: function(trigger, element, expanded) {
    if(! expanded) { // The "Close" link was clicked
      $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
    }
  }
});

Removing Readmore

$('article').readmore('destroy');

特定の要素を指定

$('article:first').readmore('destroy');

Toggling blocks programmatically

$('article:nth-of-type(3)').readmore('toggle');

CSS

selector + [data-readmore-toggle], selector[data-readmore] {
  display: block;
  width: 100%;
}

上書き

$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});

無効にする

$('article').readmore({embedCSS: false});

Media queries and other CSS tricks

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