Target next amount of cards using JQuery

user_4329847 0
Viewed 328

I have a module which shows 6 cards by default. If more than 6 cards exist, a load more button will appear. Now, I'm not using AJAX to load in the next set of cards, I've simple got CSS to hide cards after 6 items (&:nth-child(1n+7){display: none;}).

What I'm trying to achieve: Using JQuery, on button click, I'm trying to display: block on the next 6 cards.

Current results: Currently, I have, onclick all .ctaCards to have display: block, so all load in, but I only want the next 6 to show. For example, if I have 16 cards in total:

  • 6 will show by default
  • On #loadmoreBtn click, show the next 6 posts
  • That leaves 4 posts still hidden, which will show on button click again.

I also want the button to fadeOut if there are no more posts to load in.

Demo:

$(function() {

  $("#loadmoreBtn").click(function(e) {
    e.preventDefault();

    // show next 6 posts
    $(".cards .ctaCard").css("display", "block");

    // if no more posts exist to load more, hide load more button
    $(this).fadeOut(300);

  });

});
.cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cards .ctaCard{
  background: lightgrey;
  width: 40%;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.cards .ctaCard:nth-child(1n+7){
  display: none;
}


#loadmoreBtn{
  padding: 20px;
  background: blue;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cards">

  <div class="ctaCard">
    Card 1
  </div>
  
  <div class="ctaCard">
    Card 2
  </div>
  
  <div class="ctaCard">
    Card 3
  </div>
  
  <div class="ctaCard">
    Card 4
  </div>
  
  <div class="ctaCard">
    Card 5
  </div>
  
  <div class="ctaCard">
    Card 6
  </div>
  
  <div class="ctaCard">
    Card 7
  </div>
  
  <div class="ctaCard">
    Card 8
  </div>
  
  <div class="ctaCard">
    Card 9
  </div>
  
  <div class="ctaCard">
    Card 10
  </div>
  
  <div class="ctaCard">
    Card 11
  </div>
  
  <div class="ctaCard">
    Card 12
  </div>
  
  <div class="ctaCard">
    Card 13
  </div>

</div>

<!-- this button will only appear if more than 6 cards exist. I have this markup wrapped in a HuBL if statement-->

<div class="button">
  <a id="loadmoreBtn">Load more</a>
</div>

html jquery javascript
1 Answers

All you have to do is address the first 6 hidden Elements using slice().

After all elements are visible (You can get that info by simply counting them) just hide the Button.

$(function() {

  $("#loadmoreBtn").click(function(e) {
    e.preventDefault();

    // show next 6 posts
    $(".cards .ctaCard:hidden").slice(0, 6).css("display", "block");

    // if no more posts exist to load more, hide load more button
    if ($(".cards .ctaCard:hidden").length === 0) {
        $(this).fadeOut(300);
    }

  });

});
.cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cards .ctaCard{
  background: lightgrey;
  width: 40%;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.cards .ctaCard:nth-child(1n+7){
  display: none;
}


#loadmoreBtn{
  padding: 20px;
  background: blue;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cards">

  <div class="ctaCard">
    Card 1
  </div>
  
  <div class="ctaCard">
    Card 2
  </div>
  
  <div class="ctaCard">
    Card 3
  </div>
  
  <div class="ctaCard">
    Card 4
  </div>
  
  <div class="ctaCard">
    Card 5
  </div>
  
  <div class="ctaCard">
    Card 6
  </div>
  
  <div class="ctaCard">
    Card 7
  </div>
  
  <div class="ctaCard">
    Card 8
  </div>
  
  <div class="ctaCard">
    Card 9
  </div>
  
  <div class="ctaCard">
    Card 10
  </div>
  
  <div class="ctaCard">
    Card 11
  </div>
  
  <div class="ctaCard">
    Card 12
  </div>
  
  <div class="ctaCard">
    Card 13
  </div>

</div>

<!-- this button will only appear if more than 6 cards exist. I have this markup wrapped in a HuBL if statement-->

<div class="button">
  <a id="loadmoreBtn">Load more</a>
</div>

user_77335240
Related