Стилизация

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

CSS классы
Описание
.cs_readmore-btn-wrapper
  • Применяется к контейнеру кнопки, которая управляет действиями «Читать далее» или «Закрыть».
  • Служит оберткой для кнопки.
.cs_readmore-btn
  • Назначается кнопке, которая позволяет пользователю развернуть или свернуть контент.
  • Управляет стилями самой кнопки.
.cs_readmore-animation

Используется, если активирован режим CSS-анимации animationMode: 'css'.

  • Добавляется для создания анимаций через CSS.
Data-атрибуты
Описание
data-readmore-btn-toggle

Применяется к кнопке «Читать далее» или «Закрыть». Используется для отслеживания состояния кнопки.

Атрибут хранит состояние кнопки:

  • collapsed — кнопка в состоянии сворачивания контента.
  • expanded — кнопка в состоянии развернутого контента.
data-readmore-block-toggle

Применяется к элементу, содержащему контент. Помогает отслеживать текущее состояние контента (свернут или развернут).

Атрибут управляет состоянием блока контента:

  • collapsed — блок свернут.
  • expanded — блок развернут.

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

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


					.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;
					}