Changing Options
You can configure the functionality by setting the options object for the initReadMore
function.
This allows you to manage the display and animation of content on your website in detail. With these options, you can create a unique user experience tailored to your needs and aesthetic preferences.
A detailed description of the available options:
Options
Type
Default
Description
collapsedHeight
Number
200
Sets the initial content height in collapsed state (in pixels).
speed
Number
100
Defines the speed of the height change animation in milliseconds.
heightMargin
Number
16
Additional margin for height to provide space when expanding the content (in pixels).
moreLink
String
<span>Read More</span>
The «Read More» button text with HTML support. Used inside the <button>
element, which is displayed to expand hidden content.
lessLink
String
<span>Close</span>
The «Close» button text with HTML support. Used inside the <button>
element, which is displayed to collapse content after it has been expanded.
lazyLoad
Boolean
true
When enabled, elements (content or media) will only be initialized when they appear in the viewport.
hideButtonCollapse
Boolean
false
If set to true
, the «Read More» button is not displayed when the entire content fits in the visible area without needing to be collapsed.
animationMode
String
js
Animation mode for height change:
js
— use JavaScript animation;
css
— CSS animation is used. When this mode is activated, the class cs_readmore-animation
is added to the element.
breakpoints
Object
{}
Allows specifying different values for other options depending on the screen width. Keys are screen widths (in pixels), and values are objects with new option values.
Example:
breakpoints: {
768: {
collapsedHeight: 150,
moreLink: '<span>Read More</span>'
},
1200: { collapsedHeight: 200 }
}
This parameter helps adapt the script's behavior to different screen sizes.
Settings Example
To configure functionality on your site, you need to initialize the plugin with parameters in your JavaScript code.
This can be done by passing an options object to the initReadMore
function. Below is a sample code that demonstrates how to do this:
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore', {
collapsedHeight: 200, // Height of the collapsed block in pixels
speed: 300, // Animation speed in milliseconds
heightMargin: 16, // Additional margin from the height
moreLink: '<span>Read More</span>', // HTML for the «Read More» button
lessLink: '<span>Close</span>', // HTML for the «Close» button
lazyLoad: true, // Lazy initialization (displays only during scrolling)
animationMode: 'css', // Animation mode ('js' or 'css')
hideButtonCollapse: false, // Hide the «Read More» button after expansion
breakpoints: { // Responsive settings for different screens
576: { // For screens up to 576px
collapsedHeight: 100,
speed: 200,
moreLink: '<span>More</span>',
lessLink: '<span>Collapse</span>',
},
768: { // For screens up to 768px
collapsedHeight: 150,
speed: 250,
},
}
});
});
In this example, the plugin is initialized for all elements with the class .readmore
.
You can adjust the option values according to your needs to adapt the plugin behavior to your site.
This gives you the ability to create an interactive and user-friendly interface for displaying content.