JavaScript
1
Вклад в тег
let $grid = $('.card__list').isotope({
itemSelector: '.card--small',
transitionDuration: 0,
});
let showMoreBtn = document.querySelector('.js-load-more-btn');
let maxCardsToShow = 6;
let cardsToShow = 6;
let filteredItems = [];
function updateCardsDisplay() {
filteredItems.forEach((item, index) => {
if (index < maxCardsToShow) {
item.element.style.display = 'flex';
} else {
item.element.style.display = 'none';
}
});
}
$grid.isotope('on', 'arrangeComplete', function(items) {
filteredItems = items;
maxCardsToShow = 6;
updateCardsDisplay();
showMoreBtn.style.display = (filteredItems.length > maxCardsToShow) ? 'block' : 'none';
});
showMoreBtn.addEventListener('click', () => {
let cardLength = filteredItems.length;
for (let i = maxCardsToShow; i < Math.min(maxCardsToShow + cardsToShow, cardLength); i++) {
filteredItems[i].element.style.display = 'flex';
}
maxCardsToShow += cardsToShow;
if (maxCardsToShow >= cardLength) {
showMoreBtn.style.display = 'none';
}
});