Collapse Long Content With View More Button With jQuery Plugin

Simple Show More Items is a jQuery text that can be used to hide and expose part of your content (such as a long list) when the user clicks the Load More button.

jquery scroll load more content, wordpress ajax load more posts on scroll without plugin, load more jquery codepen, load more content with jquery

How to make use of it:

1. Assume you have an extended list of contents as follows:

<div class="items">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>

2. Create a Load More button to display subsequent N objects.

<div class="buttonToogle" style="display: none;">
  <a href="javascript:;" class="showMore">+ View More</a>
</div>

3. Load the newest jQuery JavaScript library at the finish of the doc.

<script src="/path/to/cdn/jquery.min.js"></script>

4. The primary JavaScript to allow the Load More button.

$(function() {
  // items to show
  var increment = 3;
  var startFilter = 0;
  var endFilter = increment;
  // item selector
  var $this = $('.items');
  var elementLength = $this.find('div').length;
  $('.listLength').text(elementLength);
  // show/hide the Load More button
  if (elementLength > 2) {
    $('.buttonToogle').show();
  }
  $('.items .item').slice(startFilter, endFilter).addClass('shown');
  $('.shownLength').text(endFilter);
  $('.items .item').not('.shown').hide();
  $('.buttonToogle .showMore').on('click', function() {
    if (elementLength > endFilter) {
      startFilter += increment;
      endFilter += increment;
      $('.items .item').slice(startFilter, endFilter).not('.shown').addClass('shown').toggle(500);
      $('.shownLength').text((endFilter > elementLength) ? elementLength : endFilter);
      if (elementLength <= endFilter) {
          $(this).remove();
      }
    }
  });
});

Static Load More Content Plugin With jQuery, Simple Show More Items Github, load more data on button click using jquery, jquery show moreless list items, load more jquery plugin, load more jquery jsfiddle