Стилізація

Ви можете стилізувати кнопку для розгортання та приховування контенту, яка додається скриптом за замовчуванням або може бути налаштована через параметри 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 керує відступом і розміром іконки для покращення візуального сприйняття.

У результаті ви отримаєте кнопку, вирівняну по центру, з сірими лініями з боків, які візуально підкреслюють межі контенту.