Як згорнути розгорнути текст на сайті. Скрипт.
Як можна згорнути розгорнути великий текст на сайті
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

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

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

Після прочитання цієї статті ви вже будете знати як приховати частину тексту на сайті а якщо клікнути на посилання показати повний текст. Думаю ви також стикалися з проблемою коли дуже багато тексту треба приховати але в той же час дати користувачеві можливість прочитати більше, дана стаття допоможе вам зрозуміти головний принцип як приховати текст в 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.

  • trigger: кнопки "Розгорнути текст" або "Згорнути текст"
  • element: блок, який в даний момент згортається або розгортається.
  • more: boolean, true - означає, що блок розгортається.

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

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

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

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

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

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

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

Ось власне і всі налаштування скрипта показати приховати великий текст. Користуйтеся на здоров'я!

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.