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

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

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


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

Важно

Убедитесь, что текст достаточно длинный, чтобы превышать значение collapsedHeight — высоту, которую вы укажете в настройках.

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

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


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

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

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


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

Примечание

Параметр maxWidth в этом случае не указывается. Скрипт будет активен на всех устройствах независимо от ширины экрана.

Инициализация с ограничением по ширине экрана

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

При установке параметра maxWidth (например, 992px), скрипт активируется только на экранах до 992px, тогда как на более широких экранах текст будет отображаться полностью без кнопки «Читать далее».


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