jQuery ShowMoreItems – Load More Button

‘ShowMoreItems’ jQuery plugin allows you to create an on-click expandable item list-view with a customizable ‘Show More’ button and you can control how many items to show and hide. Using the button users can expand the list-view to see more content.

Click here to see ‘showMoreItems’ Load More Button Examples:

Download the jQuery ‘showMoreItems’ plugin from here:

Key Features:

• Responsive in all devices

• Easy to use

• Compatible browsers: Chrome, Firefox, Opera, Safari, Edge

How to use it:

01. HTML Code:

<div class="showmore-box">
     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
         <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
          <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	  <img src="https://source.unsplash.com/random" alt="image">
     </div>

     <div class="single-pic-item">
	   <img src="https://source.unsplash.com/random" alt="image">
     </div>
</div>

02. Insert showMoreItems plugin, after loading jQuery:

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

03. Load the stylesheet showMoreItems-theme.min.css:

<link rel="stylesheet" href="/path/showMoreItems-theme.min.css" />

04. Initialize the plugin on the content list and done:

$('.showmore-box').showMoreItems({
   startNum: 6,
   afterNum: 3,
   moreText: 'Load More',
   noMoreText: 'No More',
   responsive: [
    {
      breakpoint: 1280,
      settings: {
        startNum: 2,
        afterNum: 2
      }
    },
    {
      breakpoint: 600,
      settings: {
        startNum: 1,
        afterNum: 1
      }
    }
  ]
});

05. Determine whether you need to enable the More Show Display button to set the content list to its original location after all items have been loaded. Default: false;

$('.showmore-box').showMoreItems({
    original: true,
    backMoreText: 'Reset'
});

For more Advanced Usages, please check the demo page.

That’s it! Happy coding. Thanks!