JSFiddle - React, Tailwind, and code Playground

by ipanns

HTML

<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<div style="display: none;">Content</div>
<a href="#" id="load">Load More</a>

JavaScript

$(function() {
  $("div").slice(0, 10).show(); // select the first ten
  $("#load").click(function(e) { // click event for load more
    e.preventDefault();
    $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
    if ($("div:hidden").length == 0) { // check if any hidden divs still exist
      alert("No more divs"); // alert if there are none left
    }
  });
});