Is it possible to load more content and hide previous content with jquery instead of pagination in php part ?
Like this one
$(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.
$(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);
});
});.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;
}<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:)