Як можна згорнути розгорнути великий текст на сайті

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

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

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

Скрипт який приховує великий текст, дуже корисна функція а іноді навіть необхідна для сайту, тому ми сьогодні і будемо розглядати варіант створення скрипта який буде згортати текст якщо він перевищує задану в настройках висоту. Тобто якщо ваш текст буде мати висоту блоку більше ніж ви задасте в настройках то буде з'являтися посилання при кліці на яке буде розгортатися повний текст опису, в разі якщо ж ваш текст не досягне заданої в налаштуваннях висоти дане посилання з'являтися не буде.

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

Функція самого простого виклику скрипта виглядає так:

Для виклику скрипта згорнути розгорнути текст з його додатковими настройками робимо приблизно так:

Даний скрипт має додаткові налаштування які можна до нього застосувати, розглянемо їх:

speed: 100 (швидкість розгортання тексту вказується в мілісекундах)
maxHeight: 200 (Максимальна висота блоку вказується в пікселях)
heightMargin: 16 (вказуємо в пікселях, дозволяє уникнути ламання блоків, якщо вони лише не набагато більше висоти - maxHeight)
moreLink: '<a href="#">Розгорнути текст</a>'
lessLink: '<a href="#">Згорнути текст</a>'
embedCSS: true (дозволяє додавати динамічні CSS стилі, якщо стилі ви підключаєте самі в своєму файлі стилів, встановіть значення false)
sectionCSS: 'display: block; width: 100%;' (дане значення встановлює стиль блоків)
startOpen: false (за замовчуванням блок прихований, якщо значення true - текст буде відразу розгорнутим, але буде можливість його приховати)
expandedClass: 'readmore-js-expanded' (клас css який додається до розгорнутого блоку.)
collapsedClass: 'readmore-js-collapsed' (клас css який додається до згорнутого блоку)
beforeToggle: function() {} ( функція яка викликається після натискання на кнопку "Розгорнути текст" або "Згорнути текст", але до того, як блок згорнеться або розгорнеться.)
afterToggle: function() {} ( функція яка викликається після того, як блок розгорнеться або згорнеться.)

Якщо у елемента вказана максимальна висота в стилях css, в даному випадку будуть застосовуватися саме вони, значення maxHeight буде проігноровано.

Функція зворотного виклику:

Функції зворотного виклику скрипта, beforeToggle() и afterToggle() мають ті ж аргументи: trigger, element и more.

Приклад функції зворотного виклику:

Відключення деякого функціоналу даного скрипта використовується приблизно так:

Або вкажіть потрібний вам елемент з яким скрипт не повинен працювати.

Даний скрипт за замовчуванням додає свої стилі css на сторінку:

За допомогою налаштувань скрипта перше правило можна змінити:

Для того щоб використовувати свої стилі у файлі css в налаштуваннях вам потрібно вказати значення false:

Подивитися живий приклад або завантажити скрипт, ви можете у нас на сайті: