Плагин Readmore – скрыть/показать большой текст

Readmore.js плагин позволяющий скрывать часть текста, если он превышает заданную длину без пременения стиля display: none;, что в свою очередь блатоприятно влияет на SEO. Добавляется ссылка, как правило в виде кнопки «Читать полностью» — по клику отображается скрытый текст.

Совместим с версиями jQuery выше 1.7.0

Простой вызов плагина:
Можно вызвать с дополнительными опциями: Опции:
  • 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' (класс добавляемый к развернутому блоку)
  • collapsedClass: 'readmore-js-collapsed' (класс добавляемый к свернутому блоку)
  • beforeToggle: function() {} ( функция вызываемая после нажатия на кнопку «Подробнее» или «Скрыть», но до того, как блок свернется или развернется)
  • afterToggle: function() {} ( функция вызываемая после того, как блок развернется или свернется)

Если у элемента задана максимальная высота в CSS стилях, то плагин будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов:

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

  • trigger: кнопки «Подробнее» или «Скрыть»
  • element: блок, который в настоящее время сворачивается или разворачивается
  • more: boolean, true — означает, что блок разворачивается
Пример обратного вызова.

Вот пример использования функции afterToggle, для прокрутки к верхней части блока, когда нажата кнопка «Скрыть»:

Отключить функционал плагина можно так:

Или же вы можете указать элемент, на котором плагин не должен работать:

CSS

По умолчанию плагин вставляет следующий CSS код на страницу:

С помощью опции плагина можно изменить первое правило:

Если вы хотите использовать свой файл стилей, то в настройках плагина укажите false:

Пример работы Скачать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *