Стилізація

Ви можете ознайомитися з 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;
					}