Initialization

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

To initialize, use a CSS selector, such as the .readmore class, which should be added to the target elements. Ensure the element contains enough content to exceed the collapsedHeight parameter; otherwise, the button will not appear.

					<div class="readmore">
						<!-- Your textual content, e.g., multiple 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>
				

Initialization Without Parameters

For a quick start, you can call the initReadMore function with a selector, using default settings. In this case, the plugin applies standard values: a height of 250 pixels, a 300ms animation, and button texts <span>Read More</span> and <span>Close</span>.

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

Initialization With Parameters

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

					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>',	// Expand button text
							lessLink: '<span>Collapse</span>'	// Collapse button text
						});
					});
				

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 text based on the browser window width. The keys of the breakpoints object represent 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>More</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
								}
							}
						});
					});