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.