Limit Text Length And Show Read More Link - LineShowMoreLess

File Size: 7.28 KB
Views Total: 6689
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Limit Text Length And Show Read More Link - LineShowMoreLess

Just another read more & read less jQuery plugin that collapses text more than specified lines and creates a Show More link to toggle the full content.

How to use it:

1. Put the minified version of the LineShowMoreLess plugin after jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/showmoreless.min.js"></script>

2. Call the function myOwnLineShowMoreLess on the text block and determine how many lines your text should be truncated. Default: 1.

<div class="show-less-div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor, lorem eget sagittis accumsan, dui nisl dictum sapien, a gravida nulla augue sit amet tortor. Proin fermentum erat a lobortis fringilla. Quisque id venenatis magna, sed gravida nulla. Fusce euismod ligula sed mauris finibus auctor. Donec nec neque id urna rutrum rhoncus. Suspendisse vehicula ante sed dolor euismod, vitae laoreet lectus tincidunt. Phasellus tincidunt pellentesque volutpat. Praesent ut velit sit amet dui maximus bibendum quis porttitor lacus. Mauris justo lectus, ullamcorper sit amet sodales nec, cursus a turpis. Integer sed libero semper, facilisis neque ut, venenatis neque.
</div>
$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessLine: 3
  });
})

3. Customize the Show Less & Show More buttons.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessText:'Read Less',
    showMoreText:'Read More'
  });
})

4. Determine whether to show the full content on page load and display a Show Less button at the end of the text block. Default: true.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    lessAtInitial: false
  });
})

5. Determine whether to display a Show Less button at the end of the text block after expaned. Default: true.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessAfterMore: false
  });
})

This awesome jQuery plugin is developed by siva7170. For more Advanced Usages, please check the demo page or visit the official website.