Hi all, now we can see how to create simple load more content within the page using simple JavaScript. This is not a concept of lazy loading or ajax loading this is the concept we need to show the number of section at a time and after click the load more button we need to display another set of sections using JavaScript show and hide concept.
Below example shows the load more content within the page using JavaScript, useally the read more or load more button will take you to another new page. But here the sections will load with in the same page. Here i given the demo url and download you can check and use it according to your requirement i hope this will useful to you.
Code for load more Button:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Load More within the page using jquery and Javascript</title>
<style>
.container{
margin:30px auto;
}
.col-md-4{
display:none;
}
.content{
background-color: #e4e4e4;
height: auto;
padding: 20px;
margin: 10px 0;
border: 1px solid #ccc;
}
.load-more{
background-color:#000;
color:#fff !important;
padding:5px 10px;
border-radius:4px;
font-size:20px;
margin:20px 0;
display:inline-block;
text-decoration: none;
}
.load-more:hover{
background-color:blue;
text-decoration:none;
}
</style>
</head>
<body >
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
<div class="col-md-4">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet. Sit amet massa vitae tortor condimentum lacinia. Elementum pulvinar etiam non quam lacus. Mauris augue neque gravida in fermentum et. </div>
</div>
</div>
<a href="" class="load-more">Load More</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$(function () {
$(".col-md-4").slice(0, 4).show();
$("body").on('click touchstart', '.load-more', function (e) {
e.preventDefault();
$(".col-md-4:hidden").slice(0, 4).slideDown();
if ($(".col-md-4:hidden").length == 0) {
$(".load-more").css('visibility', 'hidden');
}
$('html,body').animate({
scrollTop: $(this).offset().top },
1000);
});
});
</script>
</body>
</html>
0 Comments