Кнопка "Загрузить еще" и "скрыть"

Question

Такое дело, в секций примерно 30 таких блоков. Сперва нужно отобразить всего лишь условно 5 блоков, а дальше последует кнопка "загрузить еще" чтобы загрузила еще 5 блоков (буду очень благодарен если отображение будет плавным).

Answer 1

Сперва нужно отобразить всего лишь условно 5 блоков

значит сделайте, список, в котором будет первый элемент только с 5 блоками

а дальше последует кнопка "загрузить еще" чтобы загрузила еще 5 блоков

можно при нажатии на эту кнопку добавлять в конец списка очередной элемент с блоками используя insertAdjacentHTML и 'beforeend'

Не знаю откуда у вас эти блоки получают контент (массив в локальном коде или с сервера или другой вариант), но начать можно с такого:

let btnAdd = document.querySelector('.btn-add');
let list = document.querySelector('.list');
let item = `<li class = 'item'>
  <div class="block">Блок </div>
  <div class="block">Блок </div>
  <div class="block">Блок </div>
  <div class="block">Блок </div>
  <div class="block">Блок </div>
  </li>`

btnAdd.addEventListener('click', () => {

list.insertAdjacentHTML('beforeend', item)

})

.block {
  width: 100%;
  height: 200px;
  background-color: green;
  margin: 5px;
}

.item {
  display: flex;
  justify-content: space-between;
  list-style: none ;
}

<ul class="list">
<li class = 'item'>
  <div class="block">Блок</div>
  <div class="block">Блок</div>
  <div class="block">Блок</div>
  <div class="block">Блок</div>
  <div class="block">Блок</div>
  </li>
</ul>

<button class = 'btn-add'>Load more</button>

БЛОГ НА HUSL

Кнопка "Загрузить еще" и "скрыть"

Ответы (1 шт):