Как показать определённое количество блоков по клику?

Question

[SineYlo]

Знаю, точно такой же вопрос уже был, но там в ответе не то что нужно.

<ul class="box-list wrapper__box">
   <li class="box-list__item">1</li>
   <li class="box-list__item">2</li>
   <li class="box-list__item">3</li>
   <li class="box-list__item">4</li>
   <li class="box-list__item">5</li>
   <li class="box-list__item">6</li>
   <li class="box-list__item">7</li>
   <li class="box-list__item">8</li>
   <li class="box-list__item">9</li>
   <li class="box-list__item">10</li>
   <li class="box-list__item">11</li>
   <li class="box-list__item">12</li>
   <li class="box-list__item">13</li>
   <li class="box-list__item">14</li>
   <li class="box-list__item">15</li>
   <li class="box-list__item">16</li>
   <li class="box-list__item">17</li>
   <li class="box-list__item">18</li>
   <li class="box-list__item">19</li>
   <li class="box-list__item">20</li>
</ul>
<button class="show-more" type="button">Show more</button>

.box-list__item {
  display: none;
}

.ui-box-active {
  display: grid;
}

.ui-button-hidden {
  display: none;
}

В общем есть вот такой код JS.
На данным момент при загрузке страницы отображаемых блоков - 0.
Оно и понятно ведь они скрыты с помощью display: none;
Нужно чтобы при загрузке страницы отображалось 8 блоков, а при каждом клике на кнопку показывалось ещё 4.
Можно было бы, конечно, прописать сразу 8 блокам в разметке активный класс, но мне кажется лучше это сделать через JS чтобы не засорять лишний раз разметку.

const boxItems = document.querySelectorAll('.box-list__item');
const showMoreButton = document.querySelector('.show-more');

let per = 4;
let counter = 1;
let total = 0;

showMoreButton.addEventListener('click', (e) => {
  total = per * (counter++);

  [...boxItems].slice(0, total).forEach((el) => {
    el.classList.add('ui-box-active');
  });

  if (total >= [...boxItems].length) {
    e.currentTarget.classList.add('ui-button-hidden');
  }
});

В идеале конечно если есть такая возможно, чтобы можно было указать, например, в переменную кол-во отображаемых сразу блоков и кол-во, которое нужно показывать при каждом клике.

Answer 1

[Сергей Сергей]

.box-list__item {
  display: grid;
}
.box-list__item:nth-child(8) ~ .box-list__item{
  display: none;
}
.box-list__item:nth-child(8) ~ .box-list__item.ui-box-active{
  display: grid;
}

[...document.querySelectorAll( '.box-list__item:nth-child(8) ~ .box-list__item:not(.active)' )]
  .slice(0,4)
  .forEach( el => el.classList.add('ui-box-active') )

Понятно?

Comments

[SineYlo]

Да, это то что нужно :)
Ответ был как оказалось на поверхности.
Спасибо!

Answer 2

[0xD34F]

const SHOW_ON_LOAD = 3;
const SHOW_MORE = 2;

const items = [...document.querySelectorAll('.box-list__item')];
const button = document.querySelector('.show-more');

showItems(SHOW_ON_LOAD);
button.addEventListener('click', () => showItems(SHOW_MORE));

function showItems(count) {
  items.splice(0, count).forEach(n => n.classList.add('ui-box-active'));
  button.classList.toggle('ui-button-hidden', !items.length);
}

Comments

[SineYlo]

Спасибо за ваш вариант через JavaScript!
Я сначала подумал, что это полностью другой код, но как оказалось он переделан с использованием function.
До этого конечно я чёт не додумался :D