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:
<!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.