Static Load More jQuery Plugin - simpleLoadMore.js

Static Load More jQuery Plugin - simpleLoadMore.js

A simple static jQuery load more plugin 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.

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>'
});

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

  • Publication date: 25.02.2019
  • Source