Скрыть часть текста в кнопку "Показать больше"

Достаточно распространенная задача скрывать часть описательного текста под кнопкой "показать еще". 

Данный пост содержит лишь заготовку кода на jquery, которую всегда можно улучшить стилями.

Рассмотрим код для варианта, когда описание состоит из изображения и нескольких абзацев. Суть алгоритма заключается в том, чтобы показать изображение и первый из абзацев (в нашем случае абзацы находятся под изображением. Если изображение - часть абзаца, то можно оставить только высоту изображения).

$(document).ready(function () {
    var sectInfo = $('div#prods .sectinfo');
    if(sectInfo!==undefined && sectInfo.length>0){
       var height = 100;
       if(sectInfo.find('img').length>0){
           if(sectInfo.find('img').height()>height){
               height = sectInfo.find('img').height();
           }
           if(sectInfo.find('.description p').length>0){
               height += sectInfo.find('.description p').first().height();
           }
       }

       if(sectInfo.height()>height){
           sectInfo.css({'height':height+'px','overflow':'hidden'});
           sectInfo.after('Показать больше');
       }

       $(document).on('click','.sectinfo+a.showDMore',function () {
           if($(this).hasClass('showed')){
               sectInfo.css({'height':height+'px','overflow':'hidden'});
               $(this).text('Показать больше');
               $(this).removeClass('showed');
           } else {
               sectInfo.css({'height':'auto','overflow':'hidden'});
               $(this).text('меньше');
               $(this).addClass('showed');
           }
           return false;
       });
    }
});

Данный код при загрузке страницы проверяет, есть ли описание (не забудьте заменить селектор на свой), сверяет его высоту с эталонной (100 для примера) и, если описание больше эталонной высоты - запускает механизм.

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

К скрытому блоку добавляем ссылку-кнопку, которая покажет полный текст для пользователя и обработчик клика по этой ссылке.

Кількість показів: 2807
27.01.2019

Повернення до списку

Если вам была полезна статья можете отблагодарить автора: