This time I will share jQuery Plugin and tutorial about Static Load More Content Plugin With jQuery – Show More Items, hope it will help you in programming stack.
A simple jQuery script that can be used to hide part of your content (such as a long list) and reveal it when the user clicks the Load More button.
How to use it:
1. Supposed that you have a long content list as follows:
02 |
< div class = "item" >Item 1</ div > |
03 |
< div class = "item" >Item 2</ div > |
04 |
< div class = "item" >Item 3</ div > |
05 |
< div class = "item" >Item 4</ div > |
06 |
< div class = "item" >Item 5</ div > |
07 |
< div class = "item" >Item 6</ div > |
08 |
< div class = "item" >Item 7</ div > |
09 |
< div class = "item" >Item 8</ div > |
10 |
< div class = "item" >Item 9</ div > |
11 |
< div class = "item" >Item 10</ div > |
12 |
< div class = "item" >Item 11</ div > |
13 |
< div class = "item" >Item 12</ div > |
2. Create a Load More button to display next N items.
1 |
< div class = "buttonToogle" style = "display: none;" > |
2 |
< a href = "javascript:;" class = "showMore" >+ View More</ a > |
3. Load the latest jQuery JavaScript library at the end of the document.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
4. The main JavaScript (jQueryScript) to enable the Load More button.
07 |
var endFilter = increment; |
10 |
var $ this = $( '.items' ); |
12 |
var elementLength = $ this .find( 'div' ).length; |
13 |
$( '.listLength' ).text(elementLength); |
16 |
if (elementLength > 2) { |
17 |
$( '.buttonToogle' ).show(); |
20 |
$( '.items .item' ).slice(startFilter, endFilter).addClass( 'shown' ); |
21 |
$( '.shownLength' ).text(endFilter); |
22 |
$( '.items .item' ).not( '.shown' ).hide(); |
23 |
$( '.buttonToogle .showMore' ).on( 'click' , function () { |
24 |
if (elementLength > endFilter) { |
25 |
startFilter += increment; |
26 |
endFilter += increment; |
27 |
$( '.items .item' ).slice(startFilter, endFilter).not( '.shown' ).addClass( 'shown' ).toggle(500); |
28 |
$( '.shownLength' ).text((endFilter > elementLength) ? elementLength : endFilter); |
29 |
if (elementLength <= endFilter) { |