hagalas/readmore.js

A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Readmore.js

A smooth, lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

The required markup for Readmore.js is also extremely lightweight and very simple. No need for complicated sets of divs or hardcoded class names, just call .readmore() on the element containing your block of text and Readmore.js takes care of the rest.

Readmore.js is compatible with all versions of jQuery greater than 1.7.0.

Example

$('article').readmore();

Yes, it's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.

$('article').readmore({
  speed: 75,
  maxHeight: 500
});

The options:

• speed: 100 (in milliseconds)
• maxHeight: 200 (in pixels)
• heightMargin: 16 (in pixels, avoids collapsing blocks that are only slightly larger than maxHeight)
• moreLink: '<a href="#">Read more</a>'
• lessLink: '<a href="#">Close</a>'
• embedCSS: true (insert required CSS dynamically, set this to false if you include the necessary CSS in a stylesheet)
• sectionCSS: 'display: block; width: 100%;' (sets the styling of the blocks, ignored if embedCSS is false)
• startOpen: false (do not immediately truncate, start in the fully opened position)
• expandedClass: 'readmore-js-expanded' (class added to expanded blocks)
• collapsedClass: 'readmore-js-collapsed' (class added to collapsed blocks)
• beforeToggle: function() {} (called after a more or less link is clicked, but before the block is collapsed or expanded)
• afterToggle: function() {} (called after the block is collapsed or expanded)

If the element has a max-height CSS property, Readmore.js will use that value rather than the value of the maxHeight option.

The callbacks:

The callback functions, beforeToggle() and afterToggle, both receive the same arguments: trigger, element, and expanded.

• trigger: the "Read more" or "Close" element that was clicked
• element: the block that is being collapsed or expanded
• expanded: Boolean; true means the block is expanded

Callback example:

Here's an example of how you could use the afterToggle callback to scroll back to the top of a block when the "Close" link is clicked.

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

Recommended CSS:

The intention behind Readmore.js is to use CSS for as much functionality as possible. In particular, "collapsing" is achieved by setting overflow: hidden on the containing block and changing the height property.

By default, Readmore.js inserts the following CSS:

.readmore-js-toggle, .readmore-js-section {
  display: block;
  width: 100%;
}
.readmore-js-section {
  overflow: hidden;
}

You can override the the first set of rules when you set up Readmore.js like so:

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

If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by passing embedCSS: false in the options hash.

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

Removing Readmore

You can remove the Readmore functionality like so:

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

Or, you can be more surgical by specifying a particular element:

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