Стилізація

Цей розділ допоможе вам налаштувати зовнішній вигляд і поведінку елементів, керованих плагіном 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: '↑';
					}