3 способа скрыть текст с помощью Readmore
Наверняка вы не раз сталкивались с такой фигней когда много текста надо скрыть, но оставить возможность прочитать больше, я собрал 3 различных способа скрыть текст в readmore.
Способ №1
Простенький скрипт который помогает обрезать текст и автоматом прятать текст в спойлер, этот скрипт ни как не повредит на быстродействие сайта, поэтому юзайте не бойтесь. Устанавливается просто, без проблем.
Устанавливается он так:
1. После необходимо прописать:
1 | <script type='text/javascript' src="/js/readmore.min.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() { $('#demo').readmore({ moreLink: '<a href="#">Читать больше...</a>', lessLink: '<a href="#">Не хочу больше читать</a>', collapsedHeight: 432, speed: 200, afterToggle: function(trigger, element, expanded) { if(! expanded) { // The "Close" link was clicked $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100}); } } }); }); |
2. Участки с текстом оформляются вот так:
1 | <section id="demo">Здесь любой ваш текст</section> |
Способ №2
Абсолютно, такой же скрипт как и способ номер один, за исключением того, что он реализован не много по другому и имеет множество настроек.
jQuery
Простой вызов:
1 | $('article').readmore(); |
Можно вызвать с дополнительными опциями:
1 2 3 4 | $('article').readmore({ speed: 75, maxHeight: 500 }); |
Опции:
speed:
100 (в миллисекундах)
maxHeight:
200 (в пикселях)
heightMargin:
16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты — maxHeight)
moreLink:
‘Подробнее‘
lessLink:
‘Скрыть‘
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, для прокрутки к верхней части блока, когда нажата кнопка «Скрыть»:
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
По умолчанию скрипт вставляет следующий 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%;' }); |
Если вы хотите использовать свой файл стилей, то в настройках скрипта укажите false:
1 2 3 | $('article').readmore({ embedCSS: false }); |
Способ №3
Ну тут вообще писец одним словом, это чудо я нашел у одного клиентского сайта, работает по идиотски но клиентам пофиг, я даже объяснять не хочу как и че, просто попробуйте этот способ, он самый простетский, никаких файлов загружать не надо, просто запихали куда надо все что ниже и готово.
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript">// <![CDATA[ function collapsElement(id) { if ( document.getElementById(id).style.display != "none" ) { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = ''; } } // ]]></script> |
и это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="readmore"> Текст <p style="float:right; position: absolute; bottom: -10px; right:0px;"> <a href="javascript: collapsElement('read_more')" style="text-decoraton:none !important;"> Читать подробнее</a> </p> <div id="read_more" style="display: none;"> Подробный текст </div> </div> |