Инициализация

Скрипт Readmore.js поддерживает любые элементы, содержащие текст, который необходимо скрыть, например, <div>, <p>, <section>.

Используйте класс .readmore или другой, указанный вами в селекторе инициализации, для целевых элементов.

					<div class="readmore">
					<!-- Ваш длинный контент здесь -->
					</div>
				

Инициализация без параметров

Если вам нужно инициализировать скрипт Readmore.js без указания дополнительных параметров, его можно запустить с настройками по-умолчанию.

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

Инициализация с параметрами

Этот способ подходит, если нужно, чтобы скрипт работал на всех устройствах без ограничения по ширине экрана.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedSize: 200,
							speed: 200,
							heightMargin: 16,
							moreLink: '<span>Читать далее</span>',
							lessLink: '<span>Скрыть</span>'
						});
					});
				

Инициализация для разных размеров экрана

Этот вариант удобен, когда нужно менять параметры для разных ширин устройств или активировать скрипт на экранах с определённой шириной.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedSize: 200,
							speed: 200,
							heightMargin: 16,
							moreLink: '<span>Читать далее</span>',
							lessLink: '<span>Скрыть</span>',
							breakpoints: {
								576: {
									collapsedSize: 100,
									speed: 200,
									moreLink: '<span>Подробнее</span>',
									lessLink: '<span>Свернуть</span>',
								},
								768: {
									collapsedSize: 150,
									speed: 250,
								},
							}
						});
					});