Static Load More jQuery – 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. 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
Changelog:
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
Official Website(zeshanshani): Click Here
This superior jQuery/javascript plugin is developed by zeshanshani. For extra Advanced Usages, please go to the official website.
Be First to Comment