readmore-js

Simple "Read More" jQuery plugin for HTML5 projects

Simply add the "read-more" class to your HTML object, and a "prompt" sub-element to expand the content:

jQuery

// Global with defaults $.readMore();  // Selector with defaults $(".myObjects").readMore();

HTML

<div class="read-more">     <!-- Content Here -->     <p>My example content</p>     <p>Lorem ipsum...</p>      <p class="prompt">         <a class="button" href="#">Read More</a>     </p> </div>

Sample Demo

Here is an example using Bootstrap classes: View Demo

Options

• selector*: The jQuery selector whose content to shrink
• expandTrigger: The jQuery selector that expands the shrunken content
• previewHeight: The max height (in px/pt) to display when shrunk
• fadeColor1: Transparent background color (fully transparent)
• fadeColor2: Opaque background color (fade to this color)

// Global defaults $.readMore({     selector: ".read-more",     expandTrigger: ".prompt",     previewHeight: 120,     fadeColor1: "rgba(255,255,255,0)",     fadeColor2: "rgba(255,255,255,1)" });  // Selector defaults $(".read-more").readMore({     expandTrigger: ".prompt",     previewHeight: 120,     fadeColor1: "rgba(255,255,255,0)",     fadeColor2: "rgba(255,255,255,1)" });