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

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

Данный пост содержит лишь заготовку кода на 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 для примера) и, если описание больше эталонной высоты - запускает механизм.

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

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

Количество показов: 3890
27.01.2019

Возврат к списку

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

0x16Df809287333C49D3A237296C6248A6c08702Bc

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.