How to load more feature using jQuery ?

Last Updated : 25 Jul, 2024

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.

How to make a JSON call using jQuery ?

bhawnaatrish

Improve

Article Tags :

How to load more feature using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?