Lightweight jQuery Read More Link Plugin - Readmore.js

Lightweight jQuery Read More Link Plugin - Readmore.js
File Size: 35.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.