Home
About Us
Tutorials
PHP Tutorials
wordpress theme development
Typescript Tutorials
WordPress Tutorials
Bootstrap 3 Tutorials
Blog
Contact Us
Home
»
%%sitename%%
»
Try to make load more gallery without reloading page using javascript.
Try to make load more gallery without reloading page using javascript.
Code
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <!-- used for the character set used --> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Javascript Load More</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style type="text/css"> div.col-xs-4 { padding: 10px; border: 1px dotted; } div.col-xs-4 { display:none; } div.col-xs-12 { padding: 15px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-4"> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 7. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 8. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 9. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 10. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 11. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 12. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 13. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 14. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 15. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="col-xs-4"> 16. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="row"> <div class="col-xs-12"> <center> <a href="#" class="btn btn-success" id="loadMore">Load More</a> </center> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { $("div.col-xs-4").slice(0, 6).show(); $("#loadMore").on('click', function (e) { e.preventDefault(); $("div.col-xs-4:hidden").slice(0, 6).slideDown(); if ($("div.col-xs-4:hidden").length == 0) { $("#loadMore").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); }); </script> </body> </html>
Result