Simple and Static Simple Load More jQuery Plugin | easyLoadMore.js

Note: This is NOT AJAX dependent. It only hides all of the elements except for the first 5 (or custom) ones and shows the other 5 when the button is clicked.

How to Make Use of it

1. Insert the minified model of the jQuery load extra plugin after the jQuery JavaScript library.

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

2. Attach the plugin to the lengthy HTML content material.

<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 listing gadgets. Default: 5.

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

4. Specify the variety of gadgets to indicate at a time. Default: 5.

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

5. Customize the set off button.

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

6. Apply customized CSS kinds to the occasion.

$('.some-list').simpleLoadMore({
  cssClass: 'load-more'
});

7. Determine the variety of gadgets to load. Default: 5. Set to ‘-1’ to load all gadgets.

$('.some-list').simpleLoadMore({
  itemsToLoad: 2
});

8. Determine whether or not to indicate the counter.

$('.some-list').simpleLoadMore({
  showCounter: true,
  counterText: 'Showing showing out of '
});

jQuery Load More Plugin, Load More Data on Button Click Using jQuery, jQuery Scroll Load More Content, Simple Static jQuery Load More Plugin

2020-08-09

• v1.4.0: present component’s displaying/whole counter

2020-04-17

• v1.3.0: added ‘cssClass’ possibility

2019-04-08

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

2019-04-04

• v1.0.3: Fix $btn variable by including ‘var’ earlier than it

See Demo And Download