Ініціалізація

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

Для ініціалізації використовуйте CSS-селектор, наприклад, клас .readmore, який потрібно додати до цільових елементів. Переконайтеся, що елемент містить достатньо контенту, щоб його висота перевищувала параметр collapsedHeight, інакше кнопка не з’явиться.

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

Ініціалізація без параметрів

Для швидкого запуску Readmore.js можна викликати функцію initReadMore із селектором, використовуючи налаштування за замовчуванням. У такому разі плагін застосує стандартні значення: висота 250 пікселів, анімація тривалістю 300 мс, текст кнопок <span>Read More</span> та <span>Close</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 // Вимкнути функціонал
								}
							}
						});
					});