Initialization

The Readmore.js plugin allows you to create a «Read More» functionality for any elements with textual content, such as <div>, <p>, <section>, or <article>. The script trims the content to a specified height and adds a button to expand/collapse the text.

For initialization, use a CSS selector, such as the class .readmore, which should be added to the target elements. Ensure the element contains enough content so that its height exceeds the collapsedHeight parameter; otherwise, the button will not appear.


					<div class="readmore">
						<!-- Your textual content, e.g., several paragraphs -->
						<p>This is an example of long text that will be partially hidden...</p>
						<p>Additional content that will appear after clicking "Read More".</p>
					</div>
				
Important

If the element's content is shorter than the collapsedHeight value or consists only of whitespace or empty tags, the plugin will automatically disable the functionality for that element. For proper operation, it is recommended to check the content height before initialization.

Tip

Add unique classes or identifiers to elements if you plan to apply different settings to individual blocks on the same page.

Initialization without Parameters

For a quick start, Readmore.js can be invoked by calling the initReadMore function with a selector, using default settings. In this case, the plugin will apply standard values: a height of 250 pixels, animation duration of 300 ms, and button texts <span>Read More</span> and <span>Close</span>.


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore');
					});
				
Note

This method is suitable for basic use, but for adapting to design or behavior on different devices, it is recommended to specify custom parameters.

Initialization with Parameters

For flexible configuration, pass an object with parameters as the second argument to the initReadMore function. This allows you to change the height, animation speed, button texts, and more. This method works consistently across all devices without restrictions on screen width.


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200, // Height of the collapsed block in pixels
							speed: 400,          // Animation duration in milliseconds
							moreLink: '<span>Read More</span>', // Text for the expand button
							lessLink: '<span>Collapse</span>'   // Text for the collapse button
						});
					});
				
Advantage

You can add custom classes or styles to moreLink and lessLink, for example: <span class="btn btn-primary">Read More</span>, to match your site's design.

Initialization with Responsive Settings

To adapt the plugin's behavior to different screen sizes, use the breakpoints parameter. This allows you to set different values for collapsedHeight, speed, or button texts depending on the browser window width. The keys of the breakpoints object are the maximum screen width in pixels.


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Read More</span>',
							lessLink: '<span>Collapse</span>',
							breakpoints: {
								576: { // For screens up to 576 pixels
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Details</span>',
									lessLink: '<span>Hide</span>'
								},
								768: { // For screens up to 768 pixels
									collapsedHeight: 150,
									speed: 300
								},
								1024: { // For screens up to 1024 pixels
									disableCollapse: true // Disable functionality
								}
							}
						});
					});
				
Important

If the screen width exceeds the largest breakpoint (e.g., 1024 pixels in the example above), the plugin will not be applied unless disableCollapse: false is specified. For larger screens, set global parameters or additional breakpoints.

Tip

Use the disableCollapse parameter in breakpoints to disable the plugin on specific devices, such as desktops, where all content should be visible.