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    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 64%Total: 96 All time: 422 This week: 4Up
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
Age: 35
All time rank: 1196 in Germany Germany
Week rank: 6 Up1 in Germany Germany Up
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  

Open in a separate window

  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:96
This week:0
All time:422
This week:4Up
 User Ratings  
 
 All time
Utility:91%StarStarStarStarStar
Consistency:91%StarStarStarStarStar
Documentation:91%StarStarStarStarStar
Examples:-
Tests:-
Videos:-
Overall:64%StarStarStarStar
Rank:32