JavaScript slice() not showing the correct amount of cards on click

Forums jQueryJavaScript slice() not showing the correct amount of cards on click
Staff asked 2 years ago

I’ve got a section named. registryShowcase.

This module contains logos and by default displays 8. Then, as you press the button, it will load the following eight until there are no more to load (at which point the button will hide itself).

However, using my current technique, I’m encountering the following problems:

Because I have multiple.registryShowcase parts on a single page, when I click #registryShowcase-loadmore, it begins to show logos in the other areas as well.
Even if it has shown all potential logos, #registryShowcase-loadmore does not hide in the first part.
Section 2 only loads six more logos, despite being set to show the next eight.
Demo

$(function() {

  const loadmoreBtn = $('.registryShowcase-loadmore');
  const hiddenCard = $('.registryShowcase__card:hidden');
  var x = 8;

  loadmoreBtn.on('click', function(e) {
    e.preventDefault();
    x = x + 8;
    hiddenCard.slice(0, x).fadeIn().addClass("registryShowcase__card--flex");
    if (hiddenCard.length == 0) {
      loadmoreBtn.fadeOut();
    }
  });

});

 

:root {
  --navy: #0E185F;
  --white: #FFFFFF;
}

.registryShowcase {
  padding: 139px 0 140px 0;
}

.registryShowcase__card {
  display: none;
}

.registryShowcase__card--flex,
.registryShowcase__card:nth-child(-n+8) {
  display: flex !important;
}

.registryShowcase__box {
  margin-bottom: 21px;
  background-color: var(--white);
  border-radius: 26px;
  padding: 48px 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.registryShowcase__btn {
  margin-top: 43px;
}

.registryShowcase__btn a {
  color: #FF6575;
}

.registryShowcase__btn a:hover {
  color: var(--white);
}

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!------------------------------>
<!-- SECTION 1 (has 10 items) -->
<!------------------------------>

<section class="registryShowcase" style="background-color: #0145A4;">
  <div class="container">
    <div class="row">

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

    </div>

    <div class="row" data-animate="fadeInUp">
      <div class="col-12">
        <div class="registryShowcase__btn d-flex justify-content-center">
          <a class="button registryShowcase-loadmore" href>Load more</a>
        </div>
      </div>
    </div>

  </div>
</section>

<!------------------------------>
<!-- SECTION 2 (has 14 items) -->
<!------------------------------>

<section class="registryShowcase" style="background-color: #0057CC;">
  <div class="container">
    <div class="row">

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

      <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
        <div class="registryShowcase__box text-center">
          <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
        </div>
      </div>

    </div>

    <div class="row" data-animate="fadeInUp">
      <div class="col-12">
        <div class="registryShowcase__btn d-flex justify-content-center">
          <a class="button registryShowcase-loadmore" href>Load more</a>
        </div>
      </div>
    </div>

  </div>
</section>

 

Answers (1)

Add Answer
Prince Dhameliya Marked As Accepted
Staff answered 2 years ago

Maybe something like this, where each section maintains its current visible-count in a data-attribute, without changing too much of the code.

You can specify how many cards should be displayed up front and how many cards you want to load every button click using [data-cards-to-load] and [data-cards-to-show].

The first area now displays 6 cards and loads 6 cards every button click, while the second portion initially displays 6 cards and loads 8 cards.

const CARD_SELECTOR = '.registryShowcase__card';
const LOAD_MORE_SELECTOR = '.registryShowcase-loadmore';
const SHOWCASE_SELECTOR = '[data-showcase]';


const loadMore = (showcase$, numVisible) => {
    const cards = showcase$.find(CARD_SELECTOR);

    cards.slice(0, numVisible).fadeIn();
    cards.slice(numVisible).fadeOut();
    if (numVisible >= cards.length) {
        showcase$.find(LOAD_MORE_SELECTOR).fadeOut();
    }

    showcase$.data('showcase-visible', numVisible);
}

const initShowCase = (showcase$) => {
    const cardsToShow = showcase$.data('cards-to-show') || 6;
    const cardsToLoad =  showcase$.data('cards-to-load') || 6;
    showcase$.data('showcase-visible', 0);
    showcase$.find(CARD_SELECTOR).fadeOut()

    // Load first set of cards
    loadMore(showcase$, cardsToShow);

    showcase$.find(LOAD_MORE_SELECTOR).on('click', (ev) => {
        const visibleCards = (showcase$.data('showcase-visible')) + cardsToLoad;
        loadMore(showcase$, visibleCards);
        ev.preventDefault();
    });
}

$(function () {
    $('[data-showcases]').each((idx, showcase) => initShowCase($(showcase)));
});
:root {
    --navy: #0E185F;
    --white: #FFFFFF;
}


.registryShowcase {
    padding: 139px 0 140px 0;
}

.registryShowcase__card {
    display: none;
}



.registryShowcase__box {
    margin-bottom: 21px;
    background-color: var(--white);
    border-radius: 26px;
    padding: 48px 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.registryShowcase__btn {
    margin-top: 43px;
}

.registryShowcase__btn a {
    color: #FF6575;
}

.registryShowcase__btn a:hover {
    color: var(--white);
}

.d-none {
    display: none !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!------------------------------>
<!-- SECTION 1 (has 10 items) -->
<!------------------------------>


<section data-showcases class="registryShowcase" style="background-color: #0145A4;">
<div class="container">
    <div class="row">

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

    </div>

    <div class="row" data-animate="fadeInUp">
        <div class="col-12">
            <div class="registryShowcase__btn d-flex justify-content-center">
                <a class="button registryShowcase-loadmore" href>Load more</a>
            </div>
        </div>
    </div>

</div>
</section>


<!------------------------------>
<!-- SECTION 2 (has 14 items) -->
<!------------------------------>

<section data-showcases  data-cards-to-show='6' data-cards-to-load="8" class="registryShowcase" style="background-color: #0057CC;">
<div class="container">
    <div class="row">
        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

        <div class="col-6 col-md-2 col-lg-3 registryShowcase__card">
            <div class="registryShowcase__box text-center">
                <img class="registryShowcase__logo" src="https://7944074.fs1.hubspotusercontent-na1.net/hubfs/7944074/website/images/logos/colored/salesforce-logo.svg" alt="logo">
            </div>
        </div>

    </div>

    <div class="row" data-animate="fadeInUp">
        <div class="col-12">
            <div class="registryShowcase__btn d-flex justify-content-center">
                <a class="button registryShowcase-loadmore" href>Load more</a>
            </div>
        </div>
    </div>

</div>
</section>

 

Subscribe

Select Categories