How to load more feature using jQuery ? - GeeksforGeeks

30 Sep, 2021
Bootstrap provides a lot of useful features that we generally integrate into our websites. One of them is the “Load More” feature which we can see on every second website we visit. The load more feature is used to load more or show more content available on the webpage to the visitor. Initially, half of the content is hidden, only some part of it is visible to the visitor. And when the Load More Button is clicked, the remaining content appears. This feature also gives the website a clean look. This is a pretty cool feature you must try on your website. 
Approach: The Load More feature of bootstrap can be integrated on the website by including a particular script (given below) and few javascript libraries, in the code. This script divides all the elements corresponding to a particular class, into parts withsize according to the slice function and displays the different parts one after another on clicking the load more button on the screen. And when the size becomes zero i.e. no more elements are left, it displays the text “No more to view”.  
 Let’s see the step-by-step implementation of how to integrate the Load More feature into the website step by step.
Step 1: You just need to include the following script on your website to make the “load more” button work. Here, .block is the class of the items in the HTML code, on which we will be applying the Load More feature and #load is the id of the Load more button.
<script >
    $(document).ready(function() {
        $(".block").slice(0, 2).show();
        if ($(".block:hidden").length != 0) {
            $("#load").show();
        }
        $("#load").on("click", function(e) {
            e.preventDefault();
            $(".block:hidden").slice(0, 2).slideDown();
            if ($(".block:hidden").length == 0) {
                $("#load").text("No More to view").fadOut("slow");
            }
        });
    }) 
</script> 
 
Step 2: Also need to include the following javascript libraries in your HTML file as scripts.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
Example:
HTML
<!DOCTYPE html><html>  <head>    <title>        Load more function Example:2    </title>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">    </script>      <style>        h1 {            color: #3C8E3D;        }          .block {            display: none;            font-size: 20px;        }          #load {            font-size: 20px;            color: green;        }    </style></head>  <body>    <h1 align="center">        <b> GeeksforGeeks <br>            <u>Load more function</u>        </b>    </h1>      <div class="container">        <div class="block">            An array is a collection of items stored            at contiguous memory locations.The idea             is to store multiple items of the same             type together. This makes it easier to             calculate the position of each element             by simply adding an offset to a base             value, i.e., the memory location of the             first element of the array (generally             denoted by the name of the array).        </div>          <div class="block">            The base value is index 0 and the             difference between the two indexes is             the offset. For simplicity, we can            think of an array as a fleet of stairs             where on each step is placed a value             (let’s say one of your friends). Here,             you can identify the location of any of             your friends by simply knowing the count             of the step they are on.        </div>          <div class="block">            In C language, array has a fixed size             meaning once the size is given to it,             it cannot be changed i.e. you can’t            shrink it neither can you expand it.             The reason was that for expanding, if             we change the size we can’t be sure            ( it’s not possible every time) that we             get the next memory location to us as free.        </div>          <div class="block"> <br>            Types of indexing in an array: <br>            0 (zero-based indexing) <br>            1 (one-based indexing) <br>            n (n-based indexing)        </div>    </div>    <div id="load"> <b> Load More </b></div>      <script>        $(document).ready(function () {            $(".block").slice(0, 1).show();            if ($(".block:hidden").length != 0) {                $("#load").show();            }            $("#load").on("click", function (e) {                e.preventDefault();                $(".block:hidden").slice(0, 1).slideDown();                if ($(".block:hidden").length == 0) {                    $("#load").text("No More to view")                        .fadOut("slow");                }            });        })    </script></body>  </html>
Output:
Explanation: In this example, only one paragraph was visible in the output initially, and with every click to load more button, one more successive paragraph appears, this is because in the slice function we mentioned (0,1) this time.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)