Показать/скрыть ссылку

Question

У меня есть div с текстом внутри него. Требование состоит в том, что если текст длиной более 3 строк, то скрыть остальную часть текста и показать ссылку «больше ..». (больше ссылки должно быть добавлено к видимому тексту, а не появляться на новой строке)

Нажав на ссылку больше, div развернется, чтобы отобразить весь блок текста, а также «подробнее ..». ссылка изменится на «меньше ...».

При нажатии на меньшее текст снова вернется к 3 строкам, и появится больше ссылок.

Это должно произойти только в том случае, если текст длиннее 3 строк.

Я попытался использовать количество символов, чтобы добавить ссылку больше, но это становится проблемой, когда дело доходит до отзывчивого дизайна. Пользователи не должны видеть больше трех строк текста даже на телефонах, планшетах.

Это то, что у меня есть до сих пор.

$('.notesDiv').each(function(div) { 
       var content = $(this).html(); 

       if (content.length > 550) { 
        content = content.substr(0, 550); 
        content += ' <a href="#" class="showMore">More...</a>'; 

        $(this).html(content); 
       } 
      }); 

Answer 1

Смотреть эту FIDDLE

HTML

<div class='item'>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 

JQuery

function collapse(item) { 

    var lineHeight = item.css('line-height') !== 'normal' ? parseInt(item.css('line-height')) : parseInt(item.css('font-size')) * 3.7; 
    var height = item.height(); 
    if (lineHeight < height) { 
     item.css({ 
      'height': lineHeight + 'px', 
      overflow: 'hidden' 
     }); 
     item.children('a.toggle').length == 0 && item.append("<a href='#' class='toggle'>(more)</a>"); 
    } 
} 

$('div.item').each(function() { 
    collapse($(this)); 
}); 


$('a.toggle').click(function (event) { 
    event.preventDefault(); 

    var toggle = $(this); 
    var item = toggle.parent('div'); 
    if (toggle.text() == '(more)') { 
     toggle.text('(less)'); 
     item.css({ 
      'overflow': 'auto', 
      'height': 'auto' 
     }); 
    } else { 
     toggle.text('(more)'); 
     collapse(item); 
    } 
}); 

CSS

div.item { 
    display:inline-block; 
    max-width:300px; 
    border:1px solid grey; 
    position:relative; 
    min-height:10px; 
} 
a.toggle { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    display:inline-block; 
    background:white; 
    padding-left:10px; 
}