Stylization

This section will help you customize the appearance and behavior of elements managed 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 styling them.

These tools allow you to create a responsive, accessible, and visually appealing interface for the «Read More» / «Close» functionality.

CSS Classes
Description
.cs_readmore-btn-wrapper
  • Container for the «Read More» or «Close» button.
  • Used as a wrapper for the button to simplify 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, which toggles the content's expansion or collapse.
  • 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 height changes.
  • 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, such as 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» / «Close» 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 styling of the button based on its state.

data-readmore-block-toggle

Applied to the content element to track its state.

Possible values:

  • collapsed — content is collapsed (limited to the 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 processing by the plugin.

  • Value: true.
  • Used to indicate that the element has already been initialized to avoid 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 link it with the content element.

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

Added to the content element.

  • Value: area.
  • Designates the element as an important area of the page for screen readers.
Дополнительные замечания
  • 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 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 to dynamically change styles via JavaScript.
  • Style Cleanup: When the destroy method is called, all classes, attributes, and styles added by the plugin are removed, reverting elements to their original state.

Styling Example

The code creates a style for the button container and the button itself, adding padding, text alignment, and styles for user interaction, 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;
					}

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