Customizable Load More Button - jQuery showMoreItems

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.