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

Static load more jquery is an easy static jQuery load an extra plugin that hides overflowing parts in an HTML container and divulges the hidden gadgets on demand (by clicking on the set-off button).

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.

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

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

$('.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.

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

8. Determine whether or not to indicate the counter.

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

Options

OptionTypeDefaultDescription
itemstring (jQuery Selector)nullSet the class of the actual items this plugin should take in count.
countinteger5Set the number of items to show at first and load after the button is clicked (if itemsToLoad is not set)
itemsToLoadintegervalue of countset the number of items to load. Set to -1 to load all at once.
btnHTMLstring (html)<a href="#" class="load-more__btn">View More <i class="fas fa-angle-down"></i></a>Set a custom button here.
btnTextstringView MoreSet the button’s custom text here. Use placeholders {showing} and {total} for showing the items counter. Where {showing} shows the current number of items displaying and {total} shows the total items one instance has.
cssClassstringload-moreSet the custom CSS class for the instance. Do not include a dot in the class name, e.g., new-class
showCounterbooleanfalseShows the counter in a separate tag. By default enabling this option will show a text Showing X out of X before the load more button.
counterTextstringShowing {showing} out of {total}Set custom counter text here. Use placeholders {showing}  {total} in the text. Where {showing} shows the current number of items displaying and {total} shows the total items one instance has.
btnWrapperstring (html) | boolean<div class="load-more__btn-wrap"></div>Wrap a custom HTML tag around the ‘Load More button. Or set this to false to completely remove the wrapper
btnWrapperClassstringnullAdd a custom CSS class to the button wrapper.
easingstringfadeThis property determines how the items should load when the button is clicked. You can set it to fade or slide.
easingDurationstring400Defines how long it should take to load the next items. The value is in milliseconds.
onLoadcallback functionfunction() {}Read more under the “Events” section below.
onNextLoadcallback functionfunction() {}Read more under the “Events” section below.
onCompletecallback functionfunction() {}Read more under the “Events” section below.

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


See Demo And Download

Official Website(zeshanshani): Click Here

This superior jQuery/javascript plugin is developed by zeshanshani. For extra Advanced Usage, please go to the official website.

Share