How to implement Read More and Read Less with dotdotdot?

Question

Using the jQuery dotdotdot plugin, I would like to have both a More and Less button to show and hide entire content of a

<

Answer 1

Ehsan Sajjad's answer is correct but you also have a bug that you start with a more and a less button but rename the Less button to More instead of hiding it. I modified the JS on the Fiddle to this and now it appears to work correctly.

$(function() {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").on('click','a',function() {
        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        }
        else {
            $(this).hide();
            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({ after: "a.more", callback: dotdotdotCallback });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
         $("a", this).remove();   
        }
    }
});