jQuery - Load More Content With A Single Button Example

Jquery

Nicesnippets

1544

26-11-2020


jQuery - Load More Content With A Single Button Example

Hi Dev,

Now let's see example of how to show load more content with a single button on click in jquery. We will show contect on button click using jquery load more plugin. In this artcile i will learn you load more with single button in jquery. This tutorial will give you example of load more data using jquery example.

btnloadmore.js is a user-friendly and super tiny content loading plugin that by clicking a Load More button your users can load and append more content to current content blocks.

It is committed to providing a great pagination experience for large content blocks (like post lists, product cards, search results, etc) that enable your audience to load more content as needed.

Example


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/minty/bootstrap.min.css">

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

<title>Btnloadmore Js Load More Button Example</title>

</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

<a class="navbar-brand" href="https://www.nicesnippets.com/">NICE SNIPPETS</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="https://www.nicesnippets.com/">Home <span class="sr-only">(current)</span></a>

</li>

</ul>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

</form>

</div>

</nav>

<main role="main">

<!-- Main jumbotron for a primary marketing message or call to action -->

<div class="jumbotron">

<div class="container">

<h1 class="display-5 mt-5 pt-5 text-center">Load More Button Example</h1>

<div id="carbon-block" style="margin:30px auto"></div>

</div>

</div>

<div class="container">

<!-- Example row of columns -->

<div class="row contents">

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,

tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem

malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,

tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem

malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

<div class="col-md-4">

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id

ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris

condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>

</div>

</div>

<hr>

</div> <!-- /container -->

</main>

<footer class="container text-center">

<p><a href="http://www.aatmaninfotech.com/">aatmaninfotech.com</a></p>

</footer>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://www.jqueryscript.net/demo/load-more-single-button/btnloadmore.js"></script>

<script>

$(document).ready( function() {

$('.contents').btnLoadmore({

showItem : 3,

whenClickBtn : 3,

textBtn : 'Load more...',

classBtn : 'btn btn-danger'

});

});

</script>

</body>

</html>

It will help you...


Recommended Posts