In my code, I have a section called .registryShowcase.
This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button should disappear).
However, I am encountering some issues with my current implementation:
- When I click the
#registryShowcase-loadmorebutton, logos start showing up in other.registryShowcasesections on the same page. - The
#registryShowcase-loadmorebutton in the first section does not hide itself even after all logos have been loaded. - Section 2 only loads 6 additional logos instead of the defined next 8 logos.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253b2539">[email protected]</a>/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>
<!-- Additional logo elements omitted for brevity -->
</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 2 HTML markup omitted for brevity -->