jQuery Plugin For Collapsible Html List - showmore.js

File Size: 3.72 KB
Views Total: 2784
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Collapsible Html List - showmore.js

showmore.js is a jQuery plugin which truncates your multi-line content into a collapsible list with 'Show more' and 'Show less' links.

How to use it:

1. First you need to load jQuery library and the jQuery showmore.js plugin before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.showmore.js"></script>

2. Call the showmore function on the html list and specify how many items to be shown.

$(".ul").showmore({
  visible:10
});

3. You can also apply the plugin to any html element like divs.

$(".div").showmore({
  childElement:"div"
});

4. Customize the 'Show more' and 'Show less' links.

$(".div").showmore({
  childElement:"div",
  showMoreText : "<span>+ Show more</span>",
  showLessText : "<span>- Show less</span>",
  showMoreClass : "show_more",
  showLessClass : "show_less"
});

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