Load More Content With A Single Button - jQuery btnloadmore.js

btnloadmore.js is a user-friendly and super tiny content loading plugin that by clicking a Load More button your users can load and append more content to current content blocks.

It is committed to providing a great pagination experience for large content blocks (like post lists, product cards, search results, etc) that enable your audience to load more content as needed.

How to use it:

1. Load the btnloadmore.js script from the dist folder.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/btnloadmore.js"></script>

2. Wrap your content in DIV element as follows:

<div class="contents">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  ...
</div>

3. Call the plugin on the top container and determine how many items to display on page load (default: 6).

$('.contents').btnLoadmore({
  showItem : 3
});

4. Determine how many items to load when clicking on the Load More button. Default: 3.

$('.contents').btnLoadmore({
  whenClickBtn: 2
});

5. Customize the label for the load more button. Default: 'Loadmore ...'.

$('.contents').btnLoadmore({
  textBtn: 'Load More'
});

6. Apply additional CSS class(es) to the load more button. Default: ''.

$('.contents').btnLoadmore({
  classBtn : 'btn btn-primary'
});

7. Customize the animation speed. Default: 2000ms.

$('.contents').btnLoadmore({
  delayToScroll: 5000
});

---

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