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) { |
