Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS

Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.

Пример:

«Под кат» означает «спрятать часть моей статьи» (вырезать, где cut — «резать» с англ.). Записи большого размера разбивают на две части: вводную часть и полный текст. Делается это, чтобы на главной странице сайта не было длинных постов, а только начало в несколько строк. Полную версию записи можно читать при клике на ссылку «Подробнее» и т.п.

CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».

Развернуть-свернуть элемент под кат на jQuery

Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:



<input type="checkbox" class="read-more-checker" id="read-more-checker" />
<div class="limiter">
<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
 <div class="bottom"></div>
</div>
<label for="read-more-checker" class="read-more-button"></label>

</div>

Код 1.1: HTML блока который нужно частично скрыть



/* Стили для текстового поля с кнопкой "Далее" */
.limiter {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.limiter .bottom {
  position: absolute; /* Если прыгает - можно попробовать sticky */
  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;
}

/* Стили для текстового поля с кнопкой "Далее" */

.limiter {

max-height: 200px;

overflow: hidden;

position: relative;

}

.limiter .bottom {

position: absolute; /* Если прыгает - можно попробовать sticky */

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;

}

Код 1.2: CSS-стили скрытия текста под кат.

Подробнее о коде №1:

Тег input должен обязательно стоять перед обрабатываемым контентом. Через него происходит переключение, с помощью тега label class="read-more-button" и ссылаемся на чекбокс input через for="read-more-checker".
В теге div с class="limiter" размещается сам контент. В его стилях мы и устанавливаем необходимую высоту видимого контента.
Тег div с class="bottom" – это блок с градиентным фоном, который показывает, что под контент не полный и внизу есть что-то ещё. Его нужно настроить под свой контент.
Тег label с class="read-more-button" – тот элемент через который будет осуществляться скрытие и отображение всего контента. Также благодаря псевдоэлементам :after и :before мы можем сделать чтобы текст в условной кнопке для разворачивания изменялся в зависимости от состояния (Развернуть/Свернуть).

Источник: Aida Drogan

Решение 2. Дополнение к Решению 1, когда блоков где текст скрывается под кат несколько. Если блоков несколько, то и class, id, for со значением ‘read-more-checker’ должны различаться у всех блоков, а в стилях нужно продублировать правила где есть класс read-more-checker для новых блоков.

Можно немного уменьшить код за счет использования пользовательских атрибутов data-, а class="read-more-checker" убрать — Код №2.



<style>
.block {margin: 3rem;}

/* Стили для текстового поля с кнопкой "Развернуть" */
.limiter {
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.limiter .bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(255 217 29 / 0%),
    rgb(255 255 255)85%);
  width: 100%;
  height: 60px;
  opacity: 1;
  transition: 0.3s;
}

[data-more-checker^="read-more"] {
  opacity: 0;
  position: absolute;
}
[data-more-checker^="read-more"]:checked ~ .limiter {
  max-height: none;
}
[data-more-checker^="read-more"]:checked ~ .limiter .bottom {
  opacity: 0;
  transition: 0.3s;
}
[data-more-checker^="read-more"] ~ .read-more-button:before  {
  content: "Развернуть »";
}
[data-more-checker^="read-more"]:checked ~ .read-more-button:before {
  content: "Свернуть «";
}

.read-more-button {
  cursor: pointer;
  display: inline-block;
  color: #777;
  text-decoration: underline;
}
</style>

<div class="block">
	<input type="checkbox" id="read-more-checker" data-more-checker="read-more" />
	<div class="limiter">
	<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
	 <div class="bottom"></div>
	</div>
	<label for="read-more-checker" class="read-more-button"></label>
</div>

<div class="block">
	<input type="checkbox" id="read-more-checker-2" data-more-checker="read-more-2" />
	<div class="limiter">
	<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
	 <div class="bottom"></div>
	</div>
	<label for="read-more-checker-2" class="read-more-button"></label>
</div>

<div class="block">
	<input type="checkbox" id="read-more-checker-3" data-more-checker="read-more-3" />
	<div class="limiter">
	<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
	 <div class="bottom"></div>
	</div>
	<label for="read-more-checker-3" class="read-more-button"></label>
</div>

<style>

.block {margin: 3rem;}

/* Стили для текстового поля с кнопкой "Развернуть" */

.limiter {

max-height: 100px;

overflow: hidden;

position: relative;

}

.limiter .bottom {

position: absolute;

bottom: 0;

background: linear-gradient(

to bottom,

rgb(255 217 29 / 0%),

rgb(255 255 255)85%);

width: 100%;

height: 60px;

opacity: 1;

transition: 0.3s;

}

[data-more-checker^="read-more"] {

opacity: 0;

position: absolute;

}

[data-more-checker^="read-more"]:checked ~ .limiter {

max-height: none;

}

[data-more-checker^="read-more"]:checked ~ .limiter .bottom {

opacity: 0;

transition: 0.3s;

}

[data-more-checker^="read-more"] ~ .read-more-button:before {

content: "Развернуть »";

}

[data-more-checker^="read-more"]:checked ~ .read-more-button:before {

content: "Свернуть «";

}

.read-more-button {

cursor: pointer;

display: inline-block;

color: #777;

text-decoration: underline;

}

</style>

</div>

</div>

</div>

</div>

</div>

</div>

Код 2: Убрать текст под кат в нескольких блоках [HTML+CSS]

Подробнее о коде №2:
[data-more-checker^="read-more"] — говорит о том, что правило в стилях применяется ко всем элементам у которых атрибут ‘data-more-checker’ имеет значение, начинающееся как ‘read-more’. Т.е. применяется к всем атрибутам ‘data-more-checker’ со значениями ‘read-more’, ‘read-more-2’, ‘read-more-3’ и т.п.

4.4 5 голоса

Рейтинг статьи

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

12 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии

Максим

2 лет назад

Всю голову сломал, как же сделать, чтобы после нажатия на кнопку Развернуть форма не прыгала вниз по экрану. Это происходит лишь тогда когда желтая форма находится в верхней части экрана.

Ответить

Автор

WpCraft

2 лет назад

Ответить на Максим

Имеете в виду если раскрывающийся блок находится в самом верху, то при клике на Раскрыть страница прокручивается так что этот желтый блок становится по середине?

Интересно, конечно.
Если придумаете, то пишите 🙂

Ответить

Дмитрий

1 год назад

Ответить на Максим

Решил вопрос, заменив у .limiter .bottom absolute на sticky



Вот так в общем:
.limiter .bottom {
    position: sticky; /* Это я заменил */
    bottom: 0;
    background: linear-gradient( to bottom, rgb(255 217 29 / 0%), rgb(209 240 255)90%);
    width: 100%;
    height: 50px;
    opacity: 1;
    transition: 0.3s;
}

Вот так в общем:

.limiter .bottom {

position: sticky; /* Это я заменил */

bottom: 0;

background: linear-gradient( to bottom, rgb(255 217 29 / 0%), rgb(209 240 255)90%);

width: 100%;

height: 50px;

opacity: 1;

transition: 0.3s;

}

Все удачи все))

Ответить

Алексей

1 год назад

Спасибо, всё супер, но возникла проблема. Если на странице несколько разворачивающихся блоков, то когда разворачиваешь верхний, то разворачиваются и те, что ниже. Как этого избежать?

Ответить

Автор

WpCraft

1 год назад

Ответить на Алексей

Если есть несколько таких блоков, то у них должны быть разные class, id и for ‘read-more-checker’. Например, для первого блока используем class, id, for — «read-more-checker«. Для второго — ‘read-more-checker-2′, третьего — ‘read-more-checker-3′ и т.д. А в стилях нужно продублировать все правила где есть класс ‘read-more-checker’ через запятую.
Например, у нас было с одним блоком такое правило:
.read-more-checker:checked ~ .limiter {..

с двумя это будет так:
.read-more-checker:checked ~ .limiter,
.read-more-checker-2:checked ~ .limiter {..

Если не получится разобраться, то напишите — я тогда в статью этот случай добавлю.

Последний раз редактировалось 1 год назад WpCraft ем

Ответить

Автор

WpCraft

1 год назад

Ответить на Алексей

Обновил статью — добавил решение для нескольких блоков через пользовательские атрибуты data-.

Ответить

Алексей

1 год назад

Ответить на WpCraft

Спасибо за быстрый и подробный ответ, всё работает!

Ответить

Дмитрий

1 год назад

Ага и спойлер под ним не работает из-за позиции absolute у .limiter .bottom

Пришлось убрать синею шторку жаль((

Ответить

Автор

WpCraft

1 год назад

Ответить на Дмитрий

Что за спойлер? Вроде же все работает.

Ответить

Анджей

1 год назад

А как сделать, чтобы это работало в ленте Ajax Load More?
При установке Вашего кода открывается как надо только самая верхняя новость в ленте, а все последующие перебрасывают опять к ней. Как бы сделать, чтобы каждый свое открывал.

Была такая мысль, чтобы read-more-2, read-more-3 и т.д. работали не на одной, а каждый на своей странице, но как это сделать — не знаю.

Ответить

Автор

WpCraft

1 год назад

Ответить на Анджей

На сколько понял, вы делаете по Решению 1, но у вас несколько элементов где скрываете текст.
Нужно делать по Решению 2.

Последний раз редактировалось 1 год назад WpCraft ем

Ответить

Анджей

1 год назад

Ответить на WpCraft

И по решению 1 делал и по решению 2 — не работает, как надо. И по решению 2 — все номера собираются на одной странице-записи. А у меня бесконечная прокрутка записей, каждая со своим урл. И как сделать, чтобы каждый последующий номер ( read-more-2 и далее) открывался на своей странице (записи) — отдельно.

Возможно и это не решение. Но стоит попробовать.

Еще раз — хочется, чтобы все работало, как по решению 1, но каждый на своей странице. И может быть поможет решение 2. Но как его раскинуть по ленте?

Ответить