jquery.morelines

What is this?

.moreLines() morelines.js is a small jQuery plugin to create a Read More button to expand a long block of text content shrunk by various lines. The overflowing text fades out at the bottom and has a custom "Read More" link. view a demo on codepen.io.

How do I use it?

Add the following HTML structure:

<div class="b-category_page-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... </div>

And then initialise the plugin:

$('.b-category_page-description').moreLines(); 

You can customise with the following options:

$('.b-category_page-description').moreLines({ 	linecount: 3,                   	// force moreLines after a certain number of lines. Default is 'auto' auto = 1 	baseclass: 'b-category_page',   	// define your custom first part of class name for your CSS, for example 'b-category_page' 	basejsclass: 'js-category_page',	// define your custom first part of class name for js manipulation if needed 	classspecific: '-description',  	// specify you class name, for example '-description' - it will combine with baseclass and transform to 'b-category_page-description' 	buttontxtmore: "read more",     	// Add your inner text for button 	buttontxtless: "read less",     	// Add your inner text for button 	animationspeed: 250             	// Type your custom speed animation, by defaul is 'auto' auto = 1 });