Lightweight jQuery Read More Link Plugin - Readmore.js

Readmore is a super simple and lightweight jQuery plugin that automatically generates a Read More link for users to click and read the rest of the content.

See also:

• jQuery Plugin For Read More Functionality - readmore-readless

Basic Usage:

1. The html

<article class="slide">
<h2>Atricle Headline</h2>
...
</article>

2. Include jQuery library and jQuery Readmore plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
<script src="readmore.js"></script> 

3. Call the plugin with options.

<script>
$('article').readmore({
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,

// callbacks
blockProcessed: function() {},
beforeToggle: function(){},
afterToggle: function(){}
});
</script>

Changelog:

v2.2.1 (2018-09-23)

• Bugfix

v2.1.1 (2016-05-14)

• Add blockProcessed callback

v2.1.0 (2015-11-01)

• Fix issue with _this in toggle method

v2.0.4 (2015-02-01)

• Fix collapsedHeight logic
• Add a demo with AJAX loaded content

v2.0.0 (2015-01-04)

• Blocks can now be toggled programmatically: $('article:nth-of-type(3)').readmore('toggle')
• ARIA semantics describe expanded state and relationship between blocks and their toggles
• Blocks are now assigned an ID if they don't already have one
• Install development dependencies with NPM
• Gulp task to minifiy with UglifyJS
• Height calculations on window resize are "debounced", resulting in more efficient rendering
• Height calculation in general has been improved
• The value of the expanded argument passed to the beforeToggle callback now correctly reflects the pre-toggle state
• Multiple instances are now fully supported: e.g. $('article').readmore({speed: 200}) and $('fieldset').readmore({speed: 900}) will work on the same page
• Fully responsive, plugin now prefers max-heights set in CSS, even inside media queries
• maxHeight option is now collapsedHeight
• sectionCSS option is now blockCSS
• toggleSlider() method is now just toggle()
• Animation is now performed with CSS3 transitions, rather than jQuery.animate()
• IE 8 and 9 are no longer supported, because those browsers hate kittens
• init() is now called within a window.onload event handler, which can briefly delay collapsing content
• setBoxHeight() is now a "private" method called setBoxHeights()
• resizeBoxes() is also now private
• Adjust height calculation and fix conditional

2014-02-10

• Add classes for expanded/collapsed blocks
• Rename data variable names and tweak toggle conditional

---

This awesome jQuery plugin is developed by jedfoster. For more Advanced Usages, please check the demo page or visit the official website.