jQuery plugin for collapsing content - readmore.js

If you’re looking for a simple method to collapse and expand blocks of HTML content, I highly recommend the jQuery plugin readmore.js by Jed Foster.

Highly customisable, and implemented with a single function call against any id, class or element, e.g.:

$('p').readmore();

All CSS, more/less links and animation is taken care of automatically!

One thing to pay attention to however, is the height of the collapsed text, as a mis-alignment can cause text lines to be chopped in half horizontally. This is fixed by tweaking the maxHeight parameter, or alternatively you might be able to do something fancy with CSS to pretty it up.

Another tweak to consider is replacing the default ‘read more’ text with an image or button.

Project page: http://jedfoster.com/Readmore.js

Github: https://github.com/jedfoster/Readmore.js