Initialization

The Readmore.js script supports any elements containing text that needs to be hidden, such as <div>, <p>, <section>.

Use the .readmore class or any other class specified in the initialization selector for target elements.

					<div class="readmore">
					<!-- Your long content here -->
					</div>
				

Initialization Without Parameters

If you need to initialize the Readmore.js script without specifying additional parameters, it can be started with the default settings.

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

Initialization with Parameters

This method is suitable if you want the script to work on all devices without screen width limitations.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedSize: 200,
							speed: 200,
							heightMargin: 16,
							moreLink: '<span>Read More</span>',
							lessLink: '<span>Close</span>'
						});
					});
				

Initialization for Different Screen Sizes

This option is convenient when you need to change parameters for different device widths or activate the script on screens with specific widths.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedSize: 200,
							speed: 200,
							heightMargin: 16,
							moreLink: '<span>Read More</span>',
							lessLink: '<span>Close</span>',
							breakpoints: {
								576: {
									collapsedSize: 100,
									speed: 200,
									moreLink: '<span>More</span>',
									lessLink: '<span>Collapse</span>',
								},
								768: {
									collapsedSize: 150,
									speed: 250,
								},
							}
						});
					});