jQuery Plugin To Restrict The Number Of Rows In A List - Show First

Show First is lightweight jQuery plugin that limits the number of items in an Html list and generates a toggle button which allows you to expand/collapse the hidden items.

How to use it:

1. Include the jQuery library and the jQuery show first plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery-show-first.js"></script>

2. Add the Class 'show-first' to the Html list and the plugin will be automatically initialized with default options. By default, the Html list will show the first 10 items and hide the rest with a 'Show More' button.

<ol class="show-first">
  ...
</ol>

<ul class="show-first">
  ...
</ul>

3. Customize the option via Html5 data-option attributes.

• data-show-first-control-template: custom 'Show More' control.
• data-show-first-count: set the maximum items
• data-show-first-has-control: set to false to hide the 'Show More' control

<ul class="show-first" 
    data-show-first-control-template='<li><a href="#" class="show-first-control">Show More</a></li>'
    data-show-first-count="5"
    data-show-first-has-control="true"
>

---

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