Showing more card using slice() JS not working - Jquery

Freddy
August 29, 2022
103 views
4 votes
4 Answers

I have a section where I’m pulling blog posts and showcasing them all. By default, 13 .resourceCard‘s are show and then when clicking load more, 9 more should show.

However, when clicking the load more button, it only showcases the next 9, but not anything after that on subsequent click (doens’t show cards 23+).

Using hiddenCard.slice(x, 9) doesn’t work either as only the console log appears.

Where is my logic falling apart?

Demo

$(function () {

  var loadmoreBtn = $('.resourceListing__loadmore');
  var hiddenCard = $('.insertCard:hidden');
  var x = 13;

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;
    console.log("click");
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
    if(hiddenCard.length == 0){
      loadmoreBtn.hide();
    }
  });

});

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

.placeholderCard,
.resourceCard {
  padding: 60px;
  border: 1px solid var(--black);
  margin-bottom: 30px;
  width: 100%;
}

.placeholderCard {
  background: var(--navy);
  color: var(--white);
  padding: 20px;
}

.resourceListing {
  padding: 80px 0;
}
.resourceListing__loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
  cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
  display: none;
}

.insertCard {
  display: flex;
}
.insertCard--flex {
  display: flex !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<main class="resourceListing">
  <div class="container">
    <div class="row resourceListing__posts">

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 1</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 2</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 3</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 4</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 5</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 6</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 7</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 8</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 9</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 10</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 11</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 12</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 13</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 14</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 15</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 16</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 17</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 18</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 19</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 20</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 21</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 22</div>
      </div>
      
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 23</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 24</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 25</div>
      </div>

    </div>

    <div class="row">
      <div class="col-12">
        <a class="resourceListing__loadmore">Load more</a>
      </div>
    </div>

  </div>
</main>

Answers

The issue here is that you get list of hidden cards once. Then process 9 items from that list without updating the list. So next time it processes the same 9 cards again.

To fix that you need update the list with:

hiddenCard = hiddenCard.slice(9);

$(function () {

  var loadmoreBtn = $('.resourceListing__loadmore');
  var hiddenCard = $('.insertCard:hidden');
  var x = 13;

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;
    console.log("click", hiddenCard.length);
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex")
    //update the list
    hiddenCard = hiddenCard.slice(9);
    if(hiddenCard.length == 0){
      loadmoreBtn.hide();
    }
  });

});

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

.placeholderCard,
.resourceCard {
  padding: 60px;
  border: 1px solid var(--black);
  margin-bottom: 30px;
  width: 100%;
}

.placeholderCard {
  background: var(--navy);
  color: var(--white);
  padding: 20px;
}

.resourceListing {
  padding: 80px 0;
}
.resourceListing__loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
  cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
  display: none;
}

.insertCard {
  display: flex;
}
.insertCard--flex {
  display: flex !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<main class="resourceListing">
  <div class="container">
    <div class="row resourceListing__posts">

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 1</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 2</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 3</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 4</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 5</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 6</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 7</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 8</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 9</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 10</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 11</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 12</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 13</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 14</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 15</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 16</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 17</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 18</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 19</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 20</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 21</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 22</div>
      </div>
      
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 23</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 24</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 25</div>
      </div>

    </div>

    <div class="row">
      <div class="col-12">
        <a class="resourceListing__loadmore">Load more</a>
      </div>
    </div>

  </div>
</main>

Alternatively, you could move var hiddenCard = $('.insertCard:hidden'); into click function

P.S.
You should use const and let instead of var

After making a codepen of your code, I noticed you are not updating your ‘hiddenCard’ array after loading more. If you simply update the array, you code will work.

$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');
  var x = 13;

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;
   var hiddenCard = $('.insertCard:hidden');
   hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
   hiddenCard = $('.insertCard:hidden');

   if(!hiddenCard.length){
     loadmoreBtn.hide();
   }
  });

});

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

.placeholderCard,
.resourceCard {
  padding: 30px;
  border: 1px solid var(--black);
  margin-bottom: 15px;
  width: 100%;
}

.placeholderCard {
  background: var(--navy);
  color: var(--white);
  padding: 20px;
}

.resourceListing {
  padding: 80px 0;
}
.resourceListing__loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
  cursor: pointer;
}
.resourceListing .insertCard:nth-child(n+16) {
  display: none;
}

.insertCard {
  display: flex;
}
.insertCard--flex {
  display: flex !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<main class="resourceListing">
  <div class="container">
    <div class="row resourceListing__posts">

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 1</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 2</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 3</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 4</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 5</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 6</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 7</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 8</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 9</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 10</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 11</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 12</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 13</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 14</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 15</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 16</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 17</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 18</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 19</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 20</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 21</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 22</div>
      </div>
      
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 23</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 24</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 25</div>
      </div>

    </div>

    <div class="row">
      <div class="col-12">
        <a class="resourceListing__loadmore">Load more</a>
      </div>
    </div>

  </div>
</main>

- H8WebDev
- August 29, 2022 at 3:14 pm
- 0 votes
0
You can start by removing this line:
```
var x = 13;
```
because no need a counter! And then move this line:
```
var hiddenCard = $('.insertCard:hidden');
```
to beginning of click event after:
```
e.preventDefault();
```
Now with this changes, every time you click on Load More button, you create a new collection of remaining hidden cards and then make a slice of first 9 hidden cards.

Accourding to the jQuery documents:

…, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument.

Update

After all these changes, to hide the Load Mode button, you need to update your if statement to something like this:
```
if(hiddenCard.slice(9).length == 0){
    loadmoreBtn.hide();
}
```
Good luck!
Login or Signup to reply.

<html>
  <head><title></title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
   <style>
   :root {
      --black: #000000;
      --white: #FFFFFF;
      --navy: #0E185F;
    }

    .placeholderCard,
    .resourceCard {
      padding: 30px;
      border: 1px solid var(--black);
      margin-bottom: 15px;
      width: 100%;
    }

    .placeholderCard {
      background: var(--navy);
      color: var(--white);
      padding: 20px;
    }

    .resourceListing {
      padding: 80px 0;
    }
    .resourceListing__loadmore {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 60px 0;
      cursor: pointer;
    }
    .resourceListing .insertCard:nth-child(n+10) {
      display: none;
    }

    .insertCard {
      display: flex;
    }
    .insertCard--flex {
        display: flex !important;
    }
   </style>
   </head>
  <body>
    <main class="resourceListing">
      <div class="container">
        <div class="row resourceListing__posts">

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 1</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 2</div>
          </div>

          <div class="col-4 insertCard">
            <div class="placeholderCard">Card 3</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 4</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 5</div>
          </div>

          <div class="col-4 insertCard">
            <div class="placeholderCard">Card 6</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 7</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 8</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 9</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 10</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 11</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 12</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 13</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 14</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 15</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 16</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 17</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 18</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 19</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 20</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 21</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 21</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 22</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 23</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 24</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 25</div>
          </div>

          <div class="col-4 insertCard">
            <div class="resourceCard">Card 26</div>
          </div>

        </div>

        <div class="row">
          <div class="col-12">
            <a class="resourceListing__loadmore">Load more</a>
          </div>
        </div>

      </div>
    </main>
    <script>
    var x = 9;
    $('.resourceListing__loadmore').on('click', function(event){
       x = x + 9;
       $('.insertCard:hidden').slice(0, 9).addClass("insertCard--flex").show();
       if(!$('.insertCard:hidden').length){
         $('.resourceListing__loadmore').hide();
       }
    });
    </script>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Showing more card using slice() JS not working – Jquery

Demo

Answers

Update