Question

Firstly could you view my outcome http://jsfiddle.net/RXnKR/

From this I decided as you click the more button I’d like it to animate slowly and was unsure whether I could alter this to make that happen? I am happy for any kind of recommendation and would really appreciate it 🙂

Answer 1

Another soloution, which seems more smooth;
http://jsfiddle.net/RXnKR/6/

    $('.more').each(function () {
        var content = $(this).html();
        var height = $(this).height();
        $(this).data('fullheight', height);

        if (content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
            var collapsedHeight = $(this).height();
            $(this).data('smallheight', collapsedHeight);
        }

    });

    $(".morelink").click(function () {

        var parentMore = $(this).parents('.more');
        var more = $(this);

        if (more.hasClass("less")) {
              parentMore.animate({
                  height: parentMore.data('smallheight')
              }, 1000, function() {
                more.removeClass("less");
                more.html(moretext);
              });

        } else {
              parentMore.animate({
                  height: parentMore.data('fullheight')
              }, 1000, function() {
                more.addClass("less");
                more.html(lesstext);
              });

        }