Блог

Я пытаюсь использовать панели для отображения информации, показывая фрагмент текста, а затем сползая вниз, чтобы увидеть «подробное» представление. Код, который у меня есть в настоящее время, почти работает, но вряд ли элегантен. Вот мой код (JSFiddle)

Элемент span, похоже, работает не совсем правильно. Кроме того, мне было интересно, есть ли способ показать, что есть больше текста для просмотра с помощью своего рода «затухания в нижней части панели»? Кроме того, мой Javascript функционален, но не очень хорош. Кроме того, как я могу реализовать значок в заголовке панели, похожий на a ">" ? Есть ли способ избежать первой строки моего кода?

 $(".full").hide();
$(document).on("click", "#expander", function () {
    $(".full").slideToggle();
    $(".moreLink").toggle();
});
  

Попробуйте что-то вроде этого…

CSS:

 .panel-body {
    text-overflow: ellipsis;
    height: 40px;
}
  

JS:

 $(document).on("click", ".panel-body", function () {
    $(".panel-body").slideDown({height: "800px"}, 1000);
});
  

HTML:

      <div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis sapien,lobortis eget metus non, malesuada aliquet sapien. Pellentesque aliquet elit vitae nibh tempor, id euismod justo etum. Aenean urna quam, ornare ac mattis sit amet, auctor vel sem. Maecenas eu mattis enim. Vestibulum varius eros laoreet lorem tempus, vitae faucibus tellus mattis. Donec elementum ipsum eu tempus consequat. Etiam vestibulum dolor mi, sit amet euismod tortor scelerisque ullamcorper. Nam tristique metus sit amet feugiat sollicitudin.

    Sed laoreet sed elit et scelerisque. In iaculis magna dictum orci sagittis, vitae tempus mi sodales. Mauris ut tortor quis nunc pulvinar rutrum non sed metus. Etiam varius rutrum mi, non mollis justo euismod in. Nam quis purus felis. Etiam porttitor tempor lacus. Praesent tristique nisi eu cursus molestie. Vestibulum ullamcorper massa neque, eget placerat justo feugiat nec. Duis at ligula non diam sagittis suscipit in id enim. Nam ut orci sed risus fermentum pulvinar. Sed erat elit, porta sed ligula vel, vulputate lobortis urna. Quisque dictum aliquam nibh, interdum posuere dolor pellentesque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras enim ligula, rhoncus non dignissim nec, sollicitudin et neque.

         Donec lacus neque,