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 animation speed for changing element height (in milliseconds).
heightMargin
Number
16
Additional height margin to ensure spacing when expanding content (in pixels).
moreLink
String
<a href="#">Read More</a>
HTML content of the link or button displayed to reveal hidden content.
lessLink
String
<a href="#">Close</a>
HTML content of the link or button displayed to collapse content after expansion.
maxWidth
Number
Optional
Sets the maximum screen width in pixels at which the plugin will activate. If the screen width exceeds this value, the plugin will not activate, and the «Read More» button will not appear.

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,  // Sets the collapsed content height
							speed: 100,            // Animation speed in milliseconds
							heightMargin: 16,      // Additional height margin
							moreLink: '<a href="#">Read More</a>',  // HTML for «Read More» button
							lessLink: '<a href="#">Close</a>'      // HTML for «Close» button
						}, 768);  // Optional: Set maximum width for responsive behavior
					});

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.