Is it possible to load more content and hide previous content with jquery instead of pagination in php part ?
Like this one
JavaScript
x
$(function() { $(".set").first().show(); $("#loadMore").on('click', function(e) { e.preventDefault(); $(".set:visible").slideUp(); $(".set:visible").next().slideDown(); if ($(".set:visible").length == 1) { $(".set:visible").slideUp(); $(".set").first().slideDown(); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); });});But in that example contents are in seperate divs.
I searched on google and in here but couldn’t find an answer.
Advertisement
Answer
@DLK I add code asd below for reference of your question, please look into it, might it will help logically.
JavaScript
$(function () { $(".nextContent").slice(0, 2).show(); let $click = 0; $("#loadMore").on('click', function (e) { $click++; $(".nextContent").slice(0, $click*2).hide(); e.preventDefault(); $(".nextContent:hidden").slice($click*2, $click*2+2).slideDown(); if ($(".nextContent:hidden").length == 0) { $("#load").fadeOut('slow'); $('#loadmore').replaceWith("<p class='p'>No More</p>"); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); });JavaScript
.nextContent { display:none; margin: 5px 0; padding: 8px 0; background: #eee; border: 1px solid #ccc; text-align: center;}#loadMore { padding: 10px; width: 100%; display: block; 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; margin-top: 10px; margin-bottom: 10px;}#loadMore:hover { background-color: #eee; color: #33739E;}JavaScript
<html><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><div class="nextContent">Content1</div><div class="nextContent">Content2</div><div class="nextContent">Content3</div><div class="nextContent">Content4</div><div class="nextContent">Content5</div><div class="nextContent">Content6</div><div class="nextContent">Content7</div><a href="#" id="loadMore">Load More</a></html>Thanks:)