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

Скрипт 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,
								},
							}
						});
					});