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

Question

[krispey102]

Есть верстка:

<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, хз

Answer 1

[0xD34F]

const SHOW_INITIAL = 2;
const SHOW_MORE = 3;
const $button = $('.btn-search-more');
const $items = $('.catalog-list__items-top').hide();

showItems(SHOW_INITIAL);
$button.click(() => showItems(SHOW_MORE));

function showItems(count) {
  const $hidden = $items.filter(':hidden');
  $hidden.slice(0, count).show();
  $button.toggle($hidden.length > count);
}