Добрый день.
Есть контейнер с 8-мью блоками. В два ряда по 4 штуки.
<div class="content">
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
<div class="content-item"> </div>
</div>
со стилями:
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-height: 250px;
overflow: hidden;
}
.content-item {
height: 100px;
margin: 10px;
width: 24%;
}
@media (max-width: 1000px) and (min-width: 700px) {
.content-item {
width: calc(33vw - 16px);
}
}
При уменьшении экрана блоки увеличиваются в размере и видимая область контейнера уже содержит не 8, а 6 блоков.
При этом должна появится надпись "показать остальное", и при клике на нее появляются остальные скрытые блоки.
Можно ли в jquery прописать условие появления какого-либо класса, куда будут "складироваться" скрытые блоки, в зависимости от текущего разрешения экрана и как его правильно выразить?
Описала подробно, чтоб более ясно было для понимания.
Заранее спасибо за ответ.
ПРИМЕРНЫЕ РАЗМЫШЛЕНИЯ ТАКИЕ:
есть массив Х. изначально он пустой.
По мере изменения ширины общего контейнера (со стилем overflow(-y): hidden;), некоторые блоки будут в скрытой зоне.
Нужно будет проверять: Если блок находится в скрытой зоне, то присваиваем ему какой-нибудь класс, и отправляем в массив Х. Но как именно это можно сделать?
И если массив Х содержит элементов больше 0, то отображаем надпись "показать остальное" в заранее отведенном для нее диве.
