Если у нас есть больше двух блоков, то нужно добавить ещё?

Как изменить код таким образом, чтобы на странице автоматически отображались только первые три блока в оглавлении, а все последующие блоки добавлялись в кнопку "Ещё" и появлялись в выпадающем списке при ее нажатии?
  • 21 сентября 2023 г. 11:17
Ответы на вопрос 1
Для реализации этой функциональности нужно внести следующие изменения в код:

1. Создать кнопку "Ещё" и пустой список для последующих блоков:
```html
<button id="show-more-btn">Ещё</button>
<ul id="additional-blocks"></ul>
```

2. Скрывать все блоки, кроме первых трех:
```css
.block:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
  display: none;
}
```

3. Добавить обработчик события на кнопку "Ещё" для отображения скрытых блоков:
```javascript
document.getElementById('show-more-btn').addEventListener('click', function() {
  var blocks = document.querySelectorAll('.block:not(:first-child):not(:nth-child(2)):not(:nth-child(3))');
  var additionalBlocksList = document.getElementById('additional-blocks');

  blocks.forEach(function(block) {
    additionalBlocksList.appendChild(block);
  });
});
```

4. Удалить все атрибуты `onclick` с блоков.

Теперь при загрузке страницы будут отображены только первые три блока. При нажатии на кнопку "Ещё" скрытые блоки будут добавляться в список `#additional-blocks` и появляться в выпадающем списке.
Похожие вопросы