Load more and hide previous data without pagination in php part?-CodePudding

Is it possible to load more content and hide previous content with jquery instead of pagination in php part ?

$(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.

CodePudding user response：

@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 >Content1</div>
<div >Content2</div>
<div >Content3</div>
<div >Content4</div>
<div >Content5</div>
<div >Content6</div>
<div >Content7</div>

<a href="#" id="loadMore">Load More</a>
</html>

Thanks:)