Static Load More jQuery Plugin - simpleLoadMore.js

Static Load More jQuery Plugin - simpleLoadMore.js
File Size: 5.05 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple static jQuery load more plugin (less than 1kb minified) that hides overflowing elements in an HTML container (e.g. unordered list) and reveals the hidden items on demand (by clicking on the trigger button).

For dynamic load more plugins, check out our Infinite Scroll plugins.

How to use it:

1. Insert the minified version of the jQuery load more plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.simpleLoadMore.min.js"></script>

2. Attach the plugin to the long HTML content.

<div class="some-list">
  <div>Some List Item 1</div>
  <div>Some List Item 2</div>
  <div>Some List Item 3</div>
  <div>Some List Item 4</div>
  <div>Some List Item 5</div>
  <div>Some List Item 6</div>
  <div>Some List Item 7</div>
  <div>Some List Item 8</div>
  <div>Some List Item 9</div>
  <div>Some List Item 10</div>
  ...
</div>
$('.some-list').simpleLoadMore();

3. Specify the selector of list items. Default: 5.

$('.some-list').simpleLoadMore({
  item: 'div'
});

4. Specify the number of items to show at a time. Default: 5.

$('.some-list').simpleLoadMore({
  count: 10
});

5. Customize the trigger button.

$('.some-list').simpleLoadMore({
  btnHTML: '<a href="#" class="load-more__btn">View More <i class="fas fa-angle-down"></i></a>'
});

6. Or apply custom CSS styles to the trigger button.

$('.some-list').simpleLoadMore({
  btnHTML: '<a href="#" class="load-more__btn">View More <i class="fas fa-angle-down"></i></a>'
});

Changelog:

2019-04-19

  • v1.2.3

2019-04-18

  • v1.2.2: Bugfix

2019-04-08

  • v1.1.0: Adds argument to set itemsToLoad on click

2019-04-04

  • v1.0.3: Fix $btn variable by adding 'var' before it

2019-02-27

  • v1.0.2

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