Stylization

This section will help you customize the appearance and behavior of elements controlled by the Readmore.js plugin. Below is a detailed description of the CSS classes, data attributes, and ARIA attributes used in the plugin, along with recommendations for their styling. These tools enable you to create a responsive, accessible, and visually appealing interface for the «Read more» / «Collapse» functionality.

CSS Classes

Description

.cs_readmore-btn-wrapper

Container for the «Read more» or «Collapse» button.
Used as a wrapper for the button to facilitate positioning and styling.
Automatically hidden if the content is shorter than collapsedHeight or if hideButtonCollapse: true in the expanded state.

.cs_readmore-btn

Assigned to the button itself, responsible for expanding or collapsing the content.
Contains HTML defined in the moreLink or lessLink parameters.
Can be styled to change color, size, background, etc.

.cs_readmore-animation

Applied to the content element in CSS animation mode (animationMode: 'css').

Adds smooth transitions for changing the block's height.
It is recommended to define the CSS transition property for this class.

.cs_readmore-expanded

Added to the content element in the expanded state in CSS animation mode (animationMode: 'css').

Allows styling the expanded state, e.g., changing the background or border.
Useful for visually indicating the active state of the content.

Data Attributes

Description

data-readmore-btn-toggle

Added to the «Read more» / «Collapse» button to track its state.

Possible values:

collapsed — button in the collapsed content state (displays moreLink).
expanded — button in the expanded content state (displays lessLink).

Can be used for conditional button styling based on its state.

data-readmore-block-toggle

Applied to the content element to track its state.

Possible values:

collapsed — content is collapsed (limited by collapsedHeight).
expanded — content is fully expanded.

Useful for creating styles specific to the block's state.

data-readmore-processed

Added to the content element after being processed by the plugin.

Value: true.
Used to indicate that the element has already been initialized to prevent reprocessing.

ARIA Attributes

Description

aria-expanded

Added to the content element and button to indicate their state.

Possible values:

true — content is expanded.
false — content is collapsed.

Ensures accessibility for screen readers by indicating the element's state.

aria-hidden

Applied to the content element in the collapsed state.

Possible values:

true — content is hidden (collapsed, not all content is accessible).
Absent — content is expanded and fully visible.

Helps screen readers ignore hidden content in the collapsed state.

aria-controls

Added to the button to associate it with the content element.

Value: unique identifier of the content element.
Indicates which element is controlled by the button, improving navigation for users with assistive technologies.

role

Added to the content element.

Value: area.
Marks the element as an important page area for screen readers.

Additional Notes

JS Animation Mode: If animationMode: 'js', styles for .cs_readmore-animation and .cs_readmore-expanded are not needed, as the animation is handled by JavaScript.
Responsiveness: Use media queries along with the breakpoints parameter to adjust styles for different screen sizes.
Events: The plugin triggers custom events readmore:beforeToggle and readmore:afterToggle, which can be used for dynamic style changes via JavaScript.
Style Cleanup: When the destroy method is called, all classes, attributes, and styles added by the plugin are removed, restoring elements to their original state.

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;
					}
					.cs_readmore-animation {
						transition: height 300ms ease-in-out;
						overflow: hidden;
					}
					.cs_readmore-expanded {
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"] {
						background-color: #dc3545;
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"]:hover {
						background-color: #c82333;
					}

					/* Icons for buttons using CSS */
					.cs_readmore-btn::after {
						content: '↓';
						font-size: 14px;
					}
					.cs_readmore-btn[data-readmore-btn-toggle="expanded"]::after {
						content: '↑';
					}