Главная » Программирование » Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS

Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на 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’ и т.п.
4.4 5 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

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

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

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

Дмитрий
Дмитрий
9 месяцев назад
Ответить на  Максим

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

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

Алексей
Алексей
1 год назад

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

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

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

Дмитрий
Дмитрий
9 месяцев назад

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

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

Анджей
Анджей
8 месяцев назад

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

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

Анджей
Анджей
8 месяцев назад
Ответить на  WpCraft

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

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

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