Stylization

You can familiarize yourself with the CSS classes and data attributes used in the Readmore.js plugin, as well as their descriptions. These classes and attributes will help you style elements and control their behavior when expanding and collapsing content.

CSS Classes
Description
.cs_readmore-btn-wrapper
  • Applied to the container of the button that manages the «Read More» or «Close» actions.
  • Serves as a wrapper for the button.
.cs_readmore-btn
  • Assigned to the button that allows the user to expand or collapse the content.
  • Manages the styles of the button itself.
.cs_readmore-animation

Used if the CSS animation mode animationMode: 'css' is enabled.

  • Added to create animations through CSS.
Data Attributes
Description
data-readmore-btn-toggle

Applied to the «Read More» or «Close» button. Used to track the button's state.

The attribute stores the button state:

  • collapsed — the button is in the collapsed state.
  • expanded — the button is in the expanded state.
data-readmore-block-toggle

Applied to the element containing the content. Helps track the current state of the content (collapsed or expanded).

The attribute manages the content block's state:

  • collapsed — the block is collapsed.
  • expanded — the block is expanded.

Example of Styling

The code creates styles for the button container and the button itself, adding padding, text alignment, and user interaction styles, including color changes on hover.


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