Приветствую Вас на страницах нашего сайта. В сегодняшней статье мы будем говорить о возможности сворачивать (скрывать) текст на сайте, а при клике по ссылке показывать полный текст.
Очень часто для экономии места на сайте, или же просто для более презентабельного вида, требуется показать пользователю только часть текста, то есть свернуть развернуть текст. Особенно часто я это применяю при разработке интернет магазина в категориях, то есть, если Вам нужно в описании категории свернуть большой текст и развернуть его при клике, показать полное описание, то данная статья именно то что вам нужно.
После прочтения данной статьи вы уже будете знать как скрыть часть текста на сайте а при клике на ссылку показать полный текст. Думаю вы так же сталкивались с проблемой когда очень много текста надо скрыть но в то же время дать пользователю возможность прочитать больше, данная статья поможет вам понять главный принцип как скрыть текст в readmore.
Скрипт скрывающий большой текст, очень полезная функция а иногда даже необходимая, по этому мы сегодня и будем рассматривать вариант создания скрипта который будет сворачивать текст если он превышает заданную в настройках высоту. То есть если ваш текст будет иметь высоту блока больше чем вы зададите в настройках то будет появляться ссылка при клике на которую будет разворачиваться полный текст описания, в случае если же ваш текст не достигнет заданной в настройках высоты данная ссылка появляться не будет.
И так, сам скрипт "скрытый текст под спойлером" и пример его работы вы можете скачать и посмотреть внизу под данной статьей, а в самой статье мы рассмотрим некоторые из его функций и настроек.
Функция самого простого вызова скрипта выглядит так:
|
1 |
$('article').readmore(); |
Для вызова скрипта свернуть развернуть текст с его дополнительными настройками делаем примерно так:
|
1 2 3 4 |
$('article').readmore({ speed: 75, maxHeight: 500 }); |
Данный скрипт имеет дополнительные настройки которые можно к нему применить, рассмотрим их:
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 — означает, что блок разворачивается.
Пример функции обратного вызова:
|
1 2 3 4 5 6 7 8 9 10 11 |
$('article').readmore({ afterToggle: function(trigger, element, more) { if(! more) { // кнопка "Свернуть текст" была нажата $('html, body').animate({ scrollTop: element.offset().top },{ duration: 100 }); } } }); |
Отключения некоторого функционала данного скрипта используется примерно так:
|
1 |
$('article').readmore('destroy'); |
Или укажите нужный вам элемент с которым скрипт не должен работать.
|
1 |
$('article:first').readmore('destroy'); |
Данный скрипт по умолчанию добавляет свои стили css на страницу:
|
1 2 3 4 5 6 7 |
.readmore-js-toggle, .readmore-js-section { display: block; width: 100%; } .readmore-js-section { overflow: hidden; } |
При помощи настроек скрипта первое правило можно изменить:
|
1 2 3 |
$('article').readmore({ sectionCSS: 'display: inline-block; width: 50%;' }); |
Для того чтоб использовать свои стили в файле css в настройках вам нужно указать значение false:
|
1 2 3 |
$('article').readmore({ embedCSS: false }); |
Посмотреть живой пример или скачать скрипт, вы можете у нас на сайте:
6 комментариев
Здравствуйте! Данный скрипт не корректно работает в мобильных браузерах. И также в мобильных всегда появляется кнопка развернуть текст, даже если ниже текста нет.
Данный скрипт отлично работает и на мобильных устройствах.
Единственное что так как этот скрипт работает на JS то собственно если в телефоне по какой то причине отключена поддержка скриптов Javascript то работать не будет.
А так же нужно откорректировать css высоту для устройств, но тут уже для каждого сайта все индивидуально.
Господи, да дай вам бог здоровья)))) Весь интернет обыскал в поисках решения, и вот только тут нашел! Спасибо, огромное приогромное!
Рад что статья была Вам полезной.
А как стили прописать для слов развернуть и свернуть, цвет, шрифт, размер..?
НУ наверное нужно в сторону «readmore-js-toggle» смотреть
Ну или обернуть слова каким небудь span , да вариантов миллион… Вроде ж не сложно!