Published - | Updated - May 6, 2021 12:24 am
341 Views
In this article, we will show you Load more Example in bootstrap. This article will give you simple example of Load more Example in bootstrap. you will learn Load more Example in bootstrap.
<! DOCTYPE html>
<html>
<head>
<title>Load more Example in bootstrap - Codeplaners</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
height: 100px;
color: #000;
font-size: 24px;
line-height: 100px;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
display: none;
}
#loadMore {
width: 200px;
color: #fff;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
text-align: center;
font-size: 1.5em;
color: #fff;
font-weight: 700;
text-transform: uppercase;
background-color: #000;
}
#loadMore:hover {
color: blue;
background-color: #fff;
border: 1px solid blue;
text-decoration: none;
}
.noContent {
color: #fff !important;
background-color: #000 !important;
pointer-events: none;
}
}
</style>
</head>
<body>
<h2 align="center">Load more Example in bootstrap - Codeplaners</h2>
<br /> <br />
<div class="container">
<div class="row">
<div class="col-sm-4 content"> Codeplaners 1</div>
<div class="col-sm-4 content">Codeplaners 2 </div>
<div class="col-sm-4 content">Codeplaners 3</div>
<div class="col-sm-4 content">Codeplaners 4 </div>
<div class="col-sm-4 content">Codeplaners 5 </div>
<div class="col-sm-4 content">Codeplaners 6 </div>
<div class="col-sm-4 content">Codeplaners 7 </div>
<div class="col-sm-4 content">Codeplaners 8</div>
<div class="col-sm-4 content">Codeplaners 9 </div>
<div class="col-sm-4 content"> Codeplaners 10 </div>
<div class="col-sm-4 content">Codeplaners 11 </div>
<div class="col-sm-4 content">Codeplaners 12 </div>
<div class="col-sm-4 content">Codeplaners 13 </div>
<div class="col-sm-4 content">Codeplaners 14 </div>
<div class="col-sm-4 content"> Codeplaners 15 </div>
</div>
<a href = "#" id = "loadMore"> Load More </a>
</div>
<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>
<script>
$(document).ready (function () {
$(".content").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 3).slideDown();
if ($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
</script>
</body>
</html>