Hide button when last div is visible

Question

I'm using slice() to show the next few batch of .cards . By default, 9 cards are visible, and then, when you click on #button , it will show the next 9 (and if you click again, the next 9, etc).

When there are no more cards to show (when all cards a visible), I want to hide the #button , but my approach isn't quite working and I fear I'm doing something really stupid...

 $(function(){ var x = 9; var btn = $("#button"); $(btn).on('click', function (e) { e.preventDefault(); x = x + 9; $('.section__card').slice(0, x).slideDown(); }); // hide btn if last card is visible if ( $(".section__card").last().is(":visible") ){ console.log("last"); $(btn).fadeOut(); } });

 .section { padding: 100px 0; }.card{ max-width: 320px; margin: 0 auto; margin-bottom: 32px; }.card__image { width: 100%; height: 467px; background-size: cover; background-repeat: no-repeat; }.section__card:nth-child(2), .section__card:nth-child(3n-1) { margin-top: -60px; }.section__card:nth-child(n+10) { display: none; }.section__cta{ display: flex; justify-content: center; margin-top: 80px; } #button{ cursor: pointer; background-color: lightblue; padding: 10px; }

 <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> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <section class="section"> <div class="container"> <div class="row"> <div class="col-12 col-md-4 section__card section__card--1"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--2"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--3"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="row"> <div class="col-12"> <div class="section__cta"> <a id="button">Load more</a> </div> </div> </div> </div> </div> </section>

Answer 1

There's a dot missing in the classname here:

if ( $("section__card").last().is(":visible") ){
if ( $(".section__card").last().is(":visible") ){

Other than that the rest looks like it should function.

Answer 2

Your if condition is reached only before the button is ever clicked, atleast in this example. Move your into the button click handler, that way the check happens everytime user clicks button.

 $(function(){ var showing = 9; var btn = $("#button"); $(btn).on('click', function (e) { e.preventDefault(); showing += 3; // hide btn if last card is visible if (showing == 12){ console.log("last"); $(btn).fadeOut(); } }); });

 .section { padding: 100px 0; }.card{ max-width: 320px; margin: 0 auto; margin-bottom: 32px; }.card__image { width: 100%; height: 467px; background-size: cover; background-repeat: no-repeat; }.section__card:nth-child(2), .section__card:nth-child(3n-1) { margin-top: -60px; }.section__card:nth-child(n+10) { display: none; }.section__cta{ display: flex; justify-content: center; margin-top: 80px; } #button{ cursor: pointer; background-color: lightblue; padding: 10px; }

 <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> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <section class="section"> <div class="container"> <div class="row"> <div class="col-12 col-md-4 section__card section__card--1"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--2"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--3"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--4"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--5"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="col-12 col-md-4 section__card section__card--6"> <div class="card"> <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div> </div> </div> <div class="row"> <div class="col-12"> <div class="section__cta"> <a id="button">Load more</a> </div> </div> </div> </div> </div> </section>