Stylization

You can style the expand and collapse button that the script adds by default, or configure it via the parameters moreLink and lessLink.

— For instance, you can use parameters like this:

					//Other parameters...
					moreLink: '<div class="btn-readmore"><a href="#">Read More <i class="fa fa-angle-down"></i></a></div>',
					lessLink: '<div class="btn-readmore"><a href="#">Close <i class="fa fa-angle-up"></i></a></div>',
				

In this example, moreLink adds HTML for a «Read More» button with an icon indicating expansion, while the lessLink parameter is for the «Close» button with an icon indicating collapse. These buttons are styled as links with the class btn-readmore and contain icons from the FontAwesome library.

— To style the button, add the following CSS code to your stylesheet:

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

This CSS code customizes the button’s appearance:

• .btn-readmore adds a top border, padding, and centers the button;
• .btn-readmore a sets a white background, padding, and font size for the text, and positions it a few pixels higher;
• .btn-readmore a i manages spacing and icon size to enhance visual appeal.

As a result, you’ll get a button centered with gray lines on the sides, visually emphasizing the content boundaries.