Customizable Load More Button - jQuery showMoreItems
File Size: | 8.42 KB |
---|---|
Views Total: | 2388 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
showMoreItems is a jQuery plugin to simulate the load more feature by collapsing part of your content in a customizable Show More button. Great for long list view that enables the user to show more content on click/tap.
Key Features:
- Allows you to specify which item to show on init.
- Allows you to specify how many items to show & hide.
- Custom responsive behaviors.
How to use it:
1. Insert as many items into your content list.
<div class="list example"> <div class="item"> <div class="box"> <div class="pic"><img src="https://picsum.photos/400/300?random=1"></div> <div class="name">Item1</div> </div> </div> <div class="item"> <div class="box"> <div class="pic"><img src="https://picsum.photos/400/300?random=2"></div> <div class="name">Item2</div> </div> </div> <div class="item"> <div class="box"> <div class="pic"><img src="https://picsum.photos/400/300?random=3"></div> <div class="name">Item3</div> </div> </div> <div class="item"> <div class="box"> <div class="pic"><img src="https://picsum.photos/400/300?random=4"></div> <div class="name">Item4</div> </div> </div> ... </div>
2. Load the minified version of the showMoreItems plugin after loading jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/showMoreItems.min.js"></script>
3. Load the stylesheet showMoreItems-theme.css
to style the content list or use your own list styles.
<link rel="stylesheet" href="showMoreItems-theme.min.css" />
4. Initialize the plugin on the content list and done.
$('.example').showMoreItems({ // options here });
5. Determine the number of items to show on init. Default: 1.
$('.example').showMoreItems({ nowNum: 3 });
6. Determine which item to show on init. Default: Item 1.
$('.example').showMoreItems({ startNum: 2 });
7. Determine how many items to load at a time. Default: 1.
$('.example').showMoreItems({ afterNum: 2 });
8. Determine whether to enable the Show More button to set the content list to its original state after all items have been loaded. Default: false.
$('.example').showMoreItems({ original: true, backMoreText: 'Reset' });
9. Apply settings to the content list conditionally depending on the screen size.
$('.example').showMoreItems({ responsive: [ { breakpoint: 1280, settings: { startNum: 2, afterNum: 2 } }, { breakpoint: 600, settings: { startNum: 1, afterNum: 1 } } ] });
10. Customize the Load More & No Result text.
$('.example').showMoreItems({ moreText:'Show more', noMoreText:'No more', });
This awesome jQuery plugin is developed by peggy-hsieh. For more Advanced Usages, please check the demo page or visit the official website.