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.
- 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 ifhideButtonCollapse: true
in the expanded state.
- Assigned to the button itself, which toggles the content's expansion or collapse.
- Contains HTML defined in the
moreLink
orlessLink
parameters. - Can be styled to change color, size, background, etc.
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.
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.
Added to the «Read More» / «Close» button to track its state.
Possible values:
collapsed
— button in the collapsed content state (displaysmoreLink
).expanded
— button in the expanded content state (displayslessLink
).
Can be used for conditional styling of the button based on its state.
Applied to the content element to track its state.
Possible values:
collapsed
— content is collapsed (limited to thecollapsedHeight
).expanded
— content is fully expanded.
Useful for creating styles specific to the block's state.
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.
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.
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.
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.
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
andreadmore: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.