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

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

Подключение скрипта к сайту

В материале или HTML-модуле необходимо перейти в режим просмотра исходного кода и в самом конце вставить код подключения и вызова скрипта:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/readmore.js"></script> //Подключаем скрипт readmore.js
<script>
$('section').readmore({ //вызов плагина
speed: 250, //скорость раскрытия скрытого текста (в миллисекундах)
maxHeight: 85, //высота раскрытой области текста (в пикселях)
heightMargin: 16, //избегание ломания блоков, которые больше maxHeight (в пикселях)
moreLink: '<a href="#">Читать далее</a>', //ссылка "Читать далее", можно переименовать
lessLink: '<a href="#">Скрыть</a>' //ссылка "Скрыть", можно переименовать
});
</script>

HTML код

Рассмотрим пример на основе ниже предложенного кода.

<section>
<p>Цените каждый миг и каждый час</p>
<p>за тайный смысл угаснувших мгновений,</p>
<p>быть может, в них горят еще поленья</p>
<p>страданий той души, что молится о вас,</p>
<p>души, что вам готова всё простить,</p>
<p>всё то, что было сделано и будет,</p>
<p>и в океане одиноких судеб</p>
<p>до дна за ваше счастье будет пить!</p>
</section>

Итоговый результат

В данном примере для вывода используется тег section, при желании и необходимости его можно заменить, например, на тег article.

Видео инструкция по установке и настройке плагина Readmore.js