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

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

Пример:

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

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

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

Код 1.1: HTML блока который нужно частично скрыть
Код 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.

Код 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’ и т.п.
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

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

6 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Максим
Максим
11 месяцев назад

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

Алексей
Алексей
25 дней назад

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

Алексей
Алексей
24 дней назад
Ответить на  WpCraft

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