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

Плагин Readmore.js позволяет создавать функционал «Читать далее» для любых элементов с текстовым содержимым, таких как <div>, <p>, <section> или <article>. Скрипт обрезает содержимое до заданной высоты и добавляет кнопку для разворачивания/сворачивания текста.

Для инициализации используйте CSS-селектор, например, класс .readmore, который нужно добавить к целевым элементам. Убедитесь, что элемент содержит достаточно контента, чтобы его высота превышала параметр collapsedHeight, иначе кнопка не появится.

					<div class="readmore">
						<!-- Ваш текстовый контент, например, несколько абзацев -->
						<p>Это пример длинного текста, который будет частично скрыт...</p>
						<p>Дополнительный контент, который появится после нажатия "Читать далее".</p>
					</div>
				

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

Для быстрого запуска Readmore.js можно вызвать функцию initReadMore с селектором, используя настройки по умолчанию. В таком случае плагин применит стандартные значения: высота 250 пикселей, анимация длительностью 300 мс, текст кнопок <span>Читать далее</span> и <span>Закрыть</span>.

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

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

Для гибкой настройки Readmore.js передайте объект с параметрами вторым аргументом функции initReadMore. Это позволяет изменять высоту, скорость анимации, текст кнопок и т.д. Этот способ работает одинаково на всех устройствах без ограничений по ширине экрана.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200, // Высота свернутого блока в пикселях
							speed: 400,          // Длительность анимации в миллисекундах
							moreLink: '<span>Читать далее</span>', // Текст кнопки для разворачивания
							lessLink: '<span>Свернуть</span>'     // Текст кнопки для сворачивания
						});
					});
				

Инициализация с адаптивными настройками

Для адаптации поведения плагина к разным размерам экрана используйте параметр breakpoints. Это позволяет задавать различные значения collapsedHeight, speed или текст кнопок в зависимости от ширины окна браузера. Ключи объекта breakpoints — это максимальная ширина экрана в пикселях.

					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Читать далее</span>',
							lessLink: '<span>Свернуть</span>',
							breakpoints: {
								576: { // Для экранов до 576 пикселей
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Подробнее</span>',
									lessLink: '<span>Скрыть</span>'
								},
								768: { // Для экранов до 768 пикселей
									collapsedHeight: 150,
									speed: 300
								},
								1024: { // Для экранов до 1024 пикселей
									disableCollapse: true // Отключить функционал
								}
							}
						});
					});