引导面板幻灯片

Question

I am trying to use panels to display information, showing a snippet of the text and then sliding down in order to see the "detail" view. The code I currently have nearly works, but is hardly elegant. Here is my code (JSFiddle)

The span element doesn't seem to be working quite properly. Also, I was wondering if there is a way to show there is more text to see with a sort of "fade to the bottom of the panel"? In addition my Javascript is functional but not great. Plus, how can I implement an icon in the panel heading similar to a ">" ? Is there a way to avoid the first line of my code?

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

Answer 1

Try something like this...

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,