Стилизация

Вы можете стилизовать кнопку для развертывания и скрытия контента, которая добавляется скриптом по умолчанию или может быть настроена по параметрам moreLink и lessLink.

— Например, вы можете использовать такие параметры:

					//Другие параметры...
					moreLink: '<div class="btn-readmore"><a href="#">Читать дальше <i class="fa fa-angle-down"></i></a></div>',
					lessLink: '<div class="btn-readmore"><a href="#">Скрыть <i class="fa fa-angle-up"></i></a></div>',
				

В этом примере moreLink добавляет HTML-код для кнопки «Читать далее» с иконкой, указывающей на разворачивание, а параметр lessLink — для кнопки «Скрыть» с иконкой для сворачивания. Эти кнопки оформлены в виде ссылок с классом btn-readmore и содержат иконки из библиотеки FontAwesome.

— Для стилизации кнопки добавьте следующий CSS-код в свою таблицу стилей:

					.btn-readmore {
						border-top: 1px solid #DDDDDD;
						color: #444;
						margin: 25px auto 0;
						text-align: center;
					}
					.btn-readmore a {
						background: #fff;
						display: inline-block;
						padding: 0 20px;
						position: relative;
						top: -12px;
						font-size: 14px;
					}
					.btn-readmore a i{
						padding: 0 0 0 7px;
						font-size: 16px;
					}
				

Этот CSS-код отвечает за оформление кнопки:

• .btn-readmore добавляет верхнюю рамку, отступы и выравнивает кнопку по центру;
• .btn-readmore a устанавливает белый фон, отступы и размер шрифта для текста, а также позиционирует его на несколько пикселей выше;
• .btn-readmore a i управляет отступом и размером иконки для улучшения визуального восприятия.

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