Стилизация

Этот раздел поможет вам настроить внешний вид и поведение элементов, управляемых плагином ReadMore.js.

Ниже приведено подробное описание CSS-классов, data-атрибутов и ARIA-атрибутов, используемых в плагине, вместе с рекомендациями по их стилизации.

Эти инструменты позволяют создавать адаптивный, доступный и визуально привлекательный интерфейс для функции «Читать далее» / «Закрыть».

CSS классы
Описание
.cs_readmore-btn-wrapper
  • Контейнер для кнопки «Читать далее» или «Закрыть».
  • Используется как обертка для кнопки, чтобы упростить позиционирование и стилизацию.
  • Автоматически скрывается, если контент короче, чем collapsedHeight, или если hideButtonCollapse: true в развернутом состоянии.
.cs_readmore-btn
  • Назначается самой кнопке, которая отвечает за развертывание или сворачивание контента.
  • Содержит HTML, определенный в параметрах moreLink или lessLink.
  • Может быть стилизована для изменения цвета, размера, фона и т.д.
.cs_readmore-animation

Применяется к элементу с контентом в режиме CSS-анимации (animationMode: 'css').

  • Добавляет плавные переходы для изменения высоты блока.
  • Рекомендуется определить CSS-свойство transition для этого класса.
.cs_readmore-expanded

Добавляется к элементу с контентом в развернутом состоянии в режиме CSS-анимации (animationMode: 'css').

  • Позволяет стилизовать развернутое состояние, например, изменяя фон или обводку.
  • Полезно для визуального обозначения активного состояния контента.
Data-атрибуты
Описание
data-readmore-btn-toggle

Добавляется к кнопке «Читать далее» / «Закрыть» для отслеживания ее состояния.

Возможные значения:

  • collapsed — кнопка в состоянии свернутого контента (показывает moreLink).
  • expanded — кнопка в состоянии развернутого контента (показывает lessLink).

Может использоваться для условной стилизации кнопки в зависимости от состояния.

data-readmore-block-toggle

Применяется к элементу с контентом для отслеживания его состояния.

Возможные значения:

  • collapsed — контент свернут (ограничен высотой collapsedHeight).
  • expanded — контент полностью развернут.

Полезно для создания стилей, специфичных для состояния блока.

data-readmore-processed

Добавляется к элементу с контентом после обработки плагином.

  • Значение: true.
  • Используется для обозначения, что элемент уже инициализирован, чтобы избежать повторной обработки.
ARIA-атрибуты
Описание
aria-expanded

Добавляется к элементу с контентом и кнопке для обозначения их состояния.

Возможные значения:

  • true — контент развернут.
  • false — контент свернут.

Обеспечивает доступность для скринридеров, сообщая о состоянии элемента.

aria-hidden

Применяется к элементу с контентом в свернутом состоянии.

Возможные значения:

  • true — контент скрыт (свернут, не весь контент доступен).
  • Отсутствует — контент развернут и полностью видим.

Помогает скринридерам игнорировать скрытый контент в свернутом состоянии.

aria-controls

Добавляется к кнопке для связи с элементом контента.

  • Значение: уникальный идентификатор элемента контента.
  • Указывает, какой элемент контролируется кнопкой, улучшая навигацию для пользователей с вспомогательными технологиями.
role

Добавляется к элементу с контентом.

  • Значение: area.
  • Обозначает элемент как важную область страницы для скринридеров.
Дополнительные замечания
  • Режим JS-анимации: Если animationMode: 'js', стили для .cs_readmore-animation и .cs_readmore-expanded не нужны, поскольку анимация управляется JavaScript.
  • Адаптивность: Используйте медиа-запросы вместе с параметром breakpoints, чтобы изменять стили для разных размеров экрана.
  • События: Плагин запускает пользовательские события readmore:beforeToggle и readmore:afterToggle, которые можно использовать для динамического изменения стилей через JavaScript.
  • Очистка стилей: При вызове метода destroy все классы, атрибуты и стили, добавленные плагином, удаляются, возвращая элементы в исходное состояние.

Пример стилизации

Код создает стиль для контейнера кнопки и самой кнопки, добавляя отступы, выравнивание текста и стили для взаимодействия с пользователем, включая изменение цвета при наведении.


					.cs_readmore-btn-wrapper {
						margin: 15px auto 0;
						text-align: center;
					}
					.cs_readmore-btn-wrapper:before {
						border-top: 1px solid #ddd;
						content: '';
						display: block;
						width: 100%;
						z-index: -1;
						position: relative;
						transform: translateY(15px);
					}
					.cs_readmore-btn {
						color: #005EFF;
						background: #fff;
						border: 0;
						margin: 0;
						padding: 0 20px;
						text-align: center;
					}
					.cs_readmore-btn:hover {
						color: #0051DE;
					}
					.cs_readmore-animation {
						transition: height 300ms ease-in-out;
						overflow: hidden;
					}
					.cs_readmore-expanded {
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"] {
						background-color: #dc3545;
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"]:hover {
						background-color: #c82333;
					}

					/* Иконки для кнопки с помощью CSS */
					.cs_readmore-btn::after {
						content: '↓';
						font-size: 14px;
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"]::after {
						content: '↑';
					}