Icontem

Advanced jQuery Read More: Truncate certain text areas with a read more link

Recommend this page to a friend!
  Info   View files Documentation   Demos   View files View files (8)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2016-09-08 (23 hours ago) RSS 2.0 feedNot enough user ratingsTotal: 49 This week: 49All time: 445 This week: 1Up
Version License JavaScript version Categories
readmore 1.1GNU General Publi...1.5HTML, jQuery
Description Author

A small but versatile jQuery plugin that allows you to truncate specific sections of your content and then creates a "read more" link to toggle the full content.

It is fully customizable, allowing you to change the caption of the links (even individually), the size of the truncated version, whether or not images should be shown in the short version etc.

Recommendations

What is the best JavaScript read more class?
Difficulties in using a readmore.js

Picture of David Whitworth
  Performance   Level  
Name: David Whitworth <contact>
Classes: 2 packages by
Country: Germany Germany
Innovation award
Innovation award
Nominee: 1x

Details

Advanced jQuery Read More v1.1

Dynamic Read More plugin for jQuery

(c) 2016 David Whitworth (david@whitworth.de)

Released under the GNU General Public License (GPL)

Description

A small but versatile jQuery plugin that allows you to truncate specific sections of your content and then creates a link to toggle the full content.

Setup

  1. Copy the files from the css and js directories to your corresponding asset directories.
  2. Include the advanced-read-more.css or advanced-read-more.min.css in the <head>
<link href="css/advanced-read-more.min.css" rel="stylesheet" />

  1. Include jQuery (if you haven't already) followed by advanced-read-more.js or advanced-read-more.min.js in the <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/advanced-read-more.min.js"></script>

  1. Initialize the plugin below the included scripts, like so:
<script type='text/javascript'>
    $('body').readMore();
</script>

Or with custom options...

<script type='text/javascript'>
    $('body').readMore({
        showLines: 5,
        linkCaption: 'expand...',
        linkCloseCaption: 'reduce...',
        linkHint: 'Click for more information'
    });
</script>

Live-Demo

You can find a more detailed introduction including demos for the script here:

http://whitworth.de/ReadMore/ReadMe.html

Update history

Version 1.1

Fixes:

  • Removed a misplaced placeholder item

New Features:

  • Added option linking.
  • Added several data-attributes.

Version 1.0.1

Fixes:

  • Changed the calculation of line-height to make it work in all browsers

Miscellaneous

If you're interested in my other plugins, like the scroll progress tracker used in the ReadMe.html, feel free to download them from GitHub or JSClasses.org:

https://github.com/Manostion http://www.jsclasses.org/browse/author/20883.html

Questions & Feedback

If you have any questions, notice any bugs, have issues getting the plugin to work, have an idea for a cool feature to be added, or would like to leave any other kind of feedback, feel free to contact me under David@Whitworth.de

Also, please, feel free to send me links to websites where you used this! =)

  ReadMe | AjRMExternal page  
  Files folder image Files  
File Role Description
Files folder imagecss (2 files, 1 directory)
Files folder imagejs (2 files)
Accessible without login Plain text file LICENSE Lic. Version 1.0
Accessible without login HTML file ReadMe.html Doc. Version 1.0
Accessible without login Plain text file ReadMe.md Doc. Version 1.0

  Files folder image Files  /  css  
File Role Description
Files folder imageLESS (1 file)
  Accessible without login Plain text file advanced-read-more.css Data Version 1.0
  Accessible without login Plain text file advanced-read-more.min.css Data Version 1.0

  Files folder image Files  /  css  /  LESS  
File Role Description
  Accessible without login Plain text file advanced-read-more.less Data Version 1.0

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file advanced-read-more.js Aux. Version 1.0
  Accessible without login Plain text file advanced-read-more.min.js Aux. Version 1.0

 Version Control Unique User Downloads Download Rankings  
 100%
Total:49
This week:49
All time:445
This week:1Up