Параметри

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

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

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

Опції
Тип
По замовчуванню
Опис
collapsedHeight
Число
200
Встановлює початкову висоту контенту в згорнутому стані (в пікселях).
speed
Число
100
Визначає швидкість анімації зміни висоти елемента в мілісекундах (в мілісекундах).
heightMargin
Число
16
Додатковий відступ для висоти, щоб забезпечити зазор при розгортанні контенту (в пікселях).
moreLink
Рядок
<a href="#">Read More</a>
HTML-вміст посилання або кнопки, що відображається для розкриття прихованого контенту.
lessLink
Рядок
<a href="#">Close</a>
HTML-вміст посилання або кнопки, що відображається для згортання контенту після його розкриття.
maxWidth
Число
Опція не обов'язкова
Встановлює максимальну ширину екрану в пікселях, за якої плагін буде активовано. Якщо ширина екрану перевищує це значення, плагін не активується, і кнопка «Читати далі» не відображається.

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

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

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


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,  // Встановлює висоту згорнутого контенту
							speed: 100,            // Швидкість анімації у мілісекундах
							heightMargin: 16,      // Додатковий відступ для висоти
							moreLink: '<a href="#">Читати далі</a>',  // HTML для кнопки «Читати далі»
							lessLink: '<a href="#">Приховати</a>'      // HTML для кнопки «Приховати»
						}, 768);  // Необов'язково: Встановлення максимальної ширини для адаптивної поведінки
					});

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

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

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