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

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

52
27.01.2019

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

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

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

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



Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

Добавить комментарий

captcha

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