Simple Load more content with jQuery
Have you come across any situation where you need to load more content clicking on a load more button.
This feature comes in use at situation where you need to show more content in many news/content based websites and this feature helps loading content on clicking load more button. In this tutorial you will learn how to load more content using jQuery.
How to use it:
Step 1. First of all we will create a html page called index.html and load jquery library file as this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="icon" href="https://webtaxonomy.com/wp-content/uploads/2017/05/favicon-webtaxonomy.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Load more content using jQuery."> <meta name="author" content="Raihan Reza"> <title>Load more content using jQuery. - Web Taxonomy</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> {{your content goes here}} </body> </html> |
Step 2. Add div content inside the body tag with load more button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <a href="#" id="loadMore">Load More</a> <p class="totop"> <a href="#top">Back to top</a> </p> |
Step 3. load the custom JQuery script after loading jQuery library as this:
|
1 2 |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="custom.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* Load more content with jQuery -Web Taxonomy */ $(function () { $("div").slice(0, 4).show(); $("#loadMore").on('click', function (e) { e.preventDefault(); $("div:hidden").slice(0, 4).slideDown(); if ($("div:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); }); $('a[href=#top]').click(function () { $('body,html').animate({ scrollTop: 0 }, 600); return false; }); $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('.totop a').fadeIn(); } else { $('.totop a').fadeOut(); } }); |
>
Step 4. Create a css file and include css for better display.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
body { background-color: #f6f6f6; width: 400px; margin: 20px auto; font: normal 13px/100% sans-serif; color: #444; } div { display:none; padding: 10px; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; margin-bottom: 5px; background-color: #f1f1f1; } .totop { position: fixed; bottom: 10px; right: 20px; } .totop a { display: none; } a, a:visited { color: #33739E; text-decoration: none; display: block; margin: 10px 0; } a:hover { text-decoration: none; } #loadMore { padding: 10px; text-align: center; background-color: #33739E; color: #fff; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; } #loadMore:hover { background-color: #fff; color: #33739E; } |
If you have any query please do not hesitate to share with us.
1 Comment
Very helpful information. Thanks.