Задача: Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Пример:
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Решение: Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот код для примера:
HTML
1
2
3
4
5
6
7
8
9
10
|
type="checkbox" class="read-more-checker" id="read-more-checker" />
class="limiter">
class="bottom">
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
/* Стили для текстового поля с кнопкой "Далее" */
.limiter {
max-height: 200px;
overflow: hidden;
position: relative;
}
.limiter .bottom {
position: absolute;
bottom: 0;
background: linear-gradient(
to bottom,
rgb(255 217 29 / 0%),
rgb(255 217 29)90%);
width: 100%;
height: 60px;
opacity: 1;
transition: 0.3s;
}
.read-more-checker {
opacity: 0;
position: absolute;
}
.read-more-checker:checked ~ .limiter {
max-height: none;
}
.read-more-checker:checked ~ .limiter .bottom {
opacity: 0;
transition: 0.3s;
}
.read-more-checker ~ .read-more-button:before {
content: "Развернуть »";
}
.read-more-checker:checked ~ .read-more-button:before {
content: "Свернуть «";
}
.read-more-button {
cursor: pointer;
display: inline-block;
color: #777;
text-decoration: underline;
}
|
Подробнее о коде:
- Тег input должен обязательно стоять перед обрабатываемым контентом. Через него происходит переключение, с помощью тега label с классом «read-more-button» и ссылаемся на чекбокс input через for=»read-more-checker».
- В теге div с class=»limiter» размещается сам контент. В его стилях мы и устанавливаем необходимую высоту видимого контента.
- Тег div с class=»bottom» – это блок с градиентным фоном, который показывает, что под контент не полный и внизу есть что-то ещё. Его нужно настроить под свой контент.
- Тег label с class=»read-more-button» – тот элемент через который будет осуществляться скрытие и отображение всего контента. Также благодаря псевдоэлементам :after и :before мы можем сделать чтобы текст в условной кнопке для разворачивания изменялся в зависимости от состояния (Развернуть/Свернуть).
Источник