Параметри

Ви можете налаштувати поведінку функціональності, налаштувавши об'єкт опцій функції initReadMore.

Це дозволить вам тонко налаштувати відображення та анімацію контенту на вашому сайті. Завдяки цим опціям ви можете створити унікальний користувацький досвід, який відповідає вашим вимогам та естетичним уподобанням.

Детальний опис доступних опцій:

Опції
Тип
По замовчуванню
Опис
collapsedHeight
Число
200

Встановлює початкову висоту контенту в згорнутому стані (в пікселях).

speed
Число
100
Визначає швидкість анімації зміни висоти елемента в мілісекундах.
heightMargin
Число
16
Додатковий відступ для висоти, щоб забезпечити зазор при розгортанні контенту (в пікселях).
moreLink
Рядок
<span>Read More</span>
Текст кнопки «Читати далі» з підтримкою HTML. Використовується всередині елемента <button>, який відображається для розкриття прихованого контенту.
lessLink
Рядок
<span>Close</span>
Текст кнопки «Закрити» з підтримкою HTML. Використовується всередині елемента <button>, який відображається для згортання контенту після його розкриття.
lazyLoad
Логічний
true
Якщо увімкнено, елементи (контент або мультимедіа) будуть ініціалізуватись лише при появі у зоні видимості.
hideButtonCollapse
Логічний
false
Якщо встановлено true, кнопка «Читати далі» не відображається, коли весь контент поміщається у видиму область без необхідності скорочення.
animationMode
Рядок
js

Режим анімації для зміни висоти:

js — використовується JavaScript анімацію;

css — використовується CSS-анімація. При активації цього режиму до елемента додається клас cs_readmore-animation.

breakpoints
Об'єкт
{}

Дозволяє вказати різні значення для інших опцій залежно від ширини екрана. Ключі — це ширина екрана (у пікселях), а значення — об'єкти з новими значеннями опцій.

Приклад:


								breakpoints: {
									768: {
										collapsedHeight: 150,
										moreLink: '<span>Читати далі</span>'
									},
									1200: { collapsedHeight: 200 }
							}

Цей параметр допомагає адаптувати поведінку скрипта під різні розміри екранів.

Приклад налаштувань

Щоб налаштувати функціональність на вашому сайті, вам потрібно ініціалізувати плагін з параметрами у вашому JavaScript-коді.

Це можна зробити, передавши об'єкт опцій у функцію initReadMore. Нижче наведено приклад коду, який демонструє, як це зробити:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,		// Висота згорнутого блоку в пікселях
							speed: 300,					// Швидкість анімації в мілісекундах
							heightMargin: 16,			// Додатковий відступ від висоти
							moreLink: '<span>Читати далі</span>',	// HTML для кнопки «Читати далі»
							lessLink: '<span>Закрити</span>',		// HTML для кнопки «Закрити»
							lazyLoad: true,				// Лінива ініціалізація (відображається лише під час прокручування)
							animationMode: 'css',		// Режим анімації ('js' або 'css')
							hideButtonCollapse: false,	// Ховати кнопку «Читати далі» після розгортання
							breakpoints: {				// Адаптивні налаштування для різних екранів
								576: {					// Для екранів до 576px
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Детальніше</span>',
									lessLink: '<span>Згорнути</span>',
								},
								768: {					// Для екранів до 768px
									collapsedHeight: 150,
									speed: 250,
								},
							}
						});
					});

У цьому прикладі плагін ініціалізується для всіх елементів з класом .readmore.

Ви можете змінювати значення опцій відповідно до ваших потреб, щоб адаптувати поведінку плагіна до вашого сайту.

Це дає вам можливість створити інтерактивний та зручний інтерфейс для відображення контенту.