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

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