How to load more feature using jQuery ?
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= </script> <script src= </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.
Please Login to comment...