Readmore.js - плагин скрывающий большой текст

Плагин позволяющий скрывать часть текста, если он превышает заданную длину. Добавляется ссылка, как правило в виде кнопки "Подробнее" - по клику отображается скрытый текст.

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

JS

Простой вызов плагина:

$('article').readmore();

Можно вызвать с дополнительными опциями:

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

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

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

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

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

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

$('article').readmore({
    afterToggle: function(trigger, element, more) {
        if(! more) { // кнопка "Скрыть" была нажата
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

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

$('article').readmore('destroy');

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

$('article:first').readmore('destroy');

CSS

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

.readmore-js-toggle, .readmore-js-section {
    display: block;
    width: 100%;
}
.readmore-js-section {
    overflow: hidden;
}

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

$('article').readmore({
    sectionCSS: 'display: inline-block; width: 50%;'
});

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

$('article').readmore({
    embedCSS: false
});