Load more data on button click using jQuery

You can use a single load more button on your webpage to paginate the list of records. This type of pagination is very common on the website or in mobile apps. The user needs to click on the load more button whenever the need to view more items. After the click, the data will append with the existing list items.

HTML

<div class="nextContent">Content</div>
<div class="nextContent">Content</div>
<div class="nextContent">Content</div>
<div class="nextContent">Content</div>
<div class="nextContent">Content</div>
<div class="nextContent">Content</div>
<div class="nextContent">Content</div>

<a href="#" id="loadMore">Load More</a>

CSS

.nextContent {
  display:none;
  margin: 5px 0;
  padding: 8px 0;
  background: #eee;
  border: 1px solid #ccc;
  text-align: center;
}
#loadMore {
    padding: 10px;
    width: 100%;
    display: block;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    margin-top: 10px;
    margin-bottom: 10px;
}
#loadMore:hover {
    background-color: #eee;
    color: #33739E;
}

JavaScript

$(function () {
      $(".nextContent").slice(0, 2).show();
      $("#loadMore").on('click', function (e) {
          e.preventDefault();
          $(".nextContent:hidden").slice(0, 2).slideDown();
          if ($(".nextContent:hidden").length == 0) {
              $("#load").fadeOut('slow');
              $('#loadmore').replaceWith("<p class='p'>No More</p>");
          }
          $('html,body').animate({
              scrollTop: $(this).offset().top
          }, 1500);
      });
  });

Load more data on button click using jQuery

You can customize this code further as per your requirement.