Каким образом возможно реализовать подобный момент?

Question

На сайте https://di01.ru/category/ognetushiteli/ есть функция такого слайдера

Не обязательно делать именно слайдер. Нужна возможность реализовать именно похожую плитку с возможностью добавлять в кнопки ссылки, чтобы по умолчанию это всё показывалось не полностью, а по нажатию кнопки можно было просмотреть всё. Желательно чтобы было посредством html + css. Если есть варианты, прошу помочь готовым примером кода, сам в html и css очень плохо разбираюсь.

Answer 1

Если уж очень хочется, чтобы только css+html, то как-нибудь так.

#show {
  display: none;  
}
label[for=show]{
  cursor: pointer;
  color: red;
}

.items {
  list-style: none;
  display: flex;
}
.items li {
   padding: .5rem 2rem;
   border: 1px solid #f0f0f0;
   background-color: #fafafa;
   margin: 0 1rem;
}

.items li:nth-child(n+4) {
  display: none;
}
#show:checked + .items li {
  display: block;
}

<label for="show">Показать все</label>
<input type="checkbox" id="show"/>
<ul class="items">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>

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

БЛОГ НА HUSL

Каким образом возможно реализовать подобный момент?

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