https://shineray.com/tpl/swm/js/jquery.simpleLoadMore.js

1/**
2 * Simple Load More
3 *
4 * Version: 1.0.2
5 * Author: Zeshan Ahmed
6 * Website: https://zeshanahmed.com/
7 * Github: https://github.com/zeshanshani/simple-load-more/
8 */
9(function($) {
10  $.fn.simpleLoadMore = function( options ) {
11    // Settings.
12    var settings = $.extend({
13      count: 5,
14      btnHTML: '',
15      item: ''
16    }, options);
17
18    // Variables
19    var $loadMore = $(this);
20
21    // Run through all the elements.
22    $loadMore.each(function(i, el) {
23
24      // Variables.
25      var $thisLoadMore = $(this);
26      var $items        = $thisLoadMore.find(settings.item);
27      var btnHTML       = settings.btnHTML ? settings.btnHTML : '<div class="load-more__btn1"><a href="javascript:void(0)" class="load-more__btn">learn more<i class="fas fa-angle-down"></i></a></div>';
28      var $btnHTML      = $(btnHTML);
29
30      // Add classes
31      $thisLoadMore.addClass('load-more');
32      $items.addClass('load-more__item');
33
34      // Add button.
35      if ( ! $thisLoadMore.find( '.load-more__btn' ).length && $items.length > settings.count ) {
36        $thisLoadMore.append( $btnHTML );
37      }
38
39      $btn = $thisLoadMore.find( '.load-more__btn' );
40
41      // Check if button is not present. If not, then attach $btnHTML to the $btn variable.
42      if ( ! $btn.length ) {
43        $btn = $btnHTML;
44      }
45
46      if ( $items.length > settings.count ) {
47        $items.slice(settings.count).hide();
48      }
49
50      // Add click event on button.
51      $btn.on('click', function(e) {
52        e.preventDefault();
53
54        var $this = $(this),
55        $updatedItems = $items.filter(':hidden').slice(0, settings.count);
56
57        // Show the selected elements.
58        if ( $updatedItems.length > 0 ) {
59          $updatedItems.fadeIn();
60        }
61
62        // Hide the 'View More' button
63        // if the elements lenght is less than 5.
64        if ( $updatedItems.length < settings.count ) {
65          $this.remove();
66        }
67      });
68    });
69  }
70}( jQuery ));