@krispey102

Как реализовать кнопку «показать еще» с раскрытием следующих блоков на jquery?

Есть верстка:
<div class="catalog-list__items-top pagination-container">
   <a class="catalog-list__item pagination-item" href="/stalnye-kanaty/" target="_blank">
      <div class="catalog-list__item-img">
         <img src="image01.jpg" alt="">
      </div>
      <div class="catalog-list__item-info">
         <div class="catalog-list__item-title">Канат</div>
         <ul class="catalog-list__item-stikers stikers">
            <li class="stikers__item stikers__item_blue">ГОСТ</li>
            <div class="catalog-list__item-description">
            </div>
            <div class="catalog-list__item-arrow"></div>
         </ul>
      </div>
   </a>
</div>
<div class="btn-search-more">Показать еще</div>

блоков с классом catalog-list__items-top может быть около 1000 на странице. Нужно сделать чтобы изначально отображалось 20 блоков, а кнопка "показать еще" раскрывала следующие 20, и до конца, а в конце убиралась.
Пытаюсь скрыть все блоки кроме первых 20 через css, всё ок, но как сделать чтобы кнопка раскрывала по клику следующие 20, хз
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
.hidden {
  display: none;
}

const SHOW_INITIAL = 69;
const SHOW_MORE = 187;

const $items = $('.catalog-list__items-top');

$items.slice(SHOW_INITIAL).addClass('hidden');

$('.btn-search-more').click(function() {
  $items.filter('.hidden').slice(0, SHOW_MORE).removeClass('hidden');
  $(this).toggleClass('hidden', !$items.filter('.hidden').length);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы