0

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

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

0

1 ответ 1

2

Если уж очень хочется, чтобы только 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-класс, который регулирует отображение числа элементов, такой подход не привязывается к разметке.

4
  • Отлично, но тут возникает проблема. При клике на "Показать всё" на самом сайте ни чего не происходит) До этого пытался делать сам что-то похожее, но всё по той же схеме. Я думал что я что-то не так делаю в коде. Но значит проблема в чём-то другом. В чём может быть проблема если при нажатии на кнопку ничего непроисходит?
    – BRomplat
    Commented 19 февр. 2021 в 12:29
  • @BRomplat подождите, нужно протереть пыль с шара и допить кофе (зы: либо в разметке либо в css, других вариантов нет)
    – teran
    Commented 19 февр. 2021 в 12:36
  • @teran, как понять где возникает конфликт?
    – BRomplat
    Commented 19 февр. 2021 в 15:41
  • @BRomplat в конкретно данном решении его работоспособность зависит от того, что тэги input и ul соседние, и на них действует css-правило input + ul. Как там у вас получилось не знаю, открывайте инспектор в ф12, тыкайте в элементы и просматривайте правила которые применяются. Если правило не применяется, то смотрите почему. Еще в данном примере потенциально можно обернуть все это дело во flex контейнер, и управлять очередностью элементов через order, но верстка должна быть строгой, поэтому данной решение, как уже отмечалось не гибкое.
    – teran
    Commented 19 февр. 2021 в 19:58

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.