Jquery dotdotdot add Read More Link

Jquery dotdotdot

JS CODE

//init dotdotdot
$(".reason").dotdotdot({
    ellipsis    : ' [...] ',
    wrap        : 'word',
    after       : "a.read_more",
    watch       : true,
    height      : 95,
    callback : function( isTruncated, orgContent ) {
        var self = $( this );
        self.find(".read_more").click(function(){
            toggleRead($(this));
        });                
        
        //if no more text to show hide read more link
        if(!isTruncated){                        
            self.find("a.read_more").css("display","none");
        }
        
    }
});

// Toggle truncation
function toggleRead(caller) {
    var callerText = $(caller).text();
    var parent = $(caller).closest(".reason");
    var isTruncated = $(parent).triggerHandler("isTruncated");
    if (isTruncated) {        
        // Remove ellipsis
        $(parent).trigger("destroy.dot");
        // Update text - have to be clever about it, since destroy overwrites after element text values apparently
        $(parent).find("a").html("« Read less");
        // Re-add click function since I guess destroy also removes this
        $(parent).find("a").click(function () {
            toggleRead(this);
        });
    } else {
        
      // Update text
      $(parent).find("a").html("Read more »");
        
      // Re-add ellipsis
      $(parent).dotdotdot({
          ellipsis    : ' [...] ',
          wrap        : 'word',
          after       : "a.read_more",
          watch       : true,
          height      : 95
      });
      
      // Have to re-add click function again, not totally sure why
      $(parent).find("a").click(function () {
          toggleRead(this);
      });
    }
}


HTML CODE

<p class="reason">
Lorem ipsum dolor sit amet, vim altera option cotidieque ea, sea ei forensibus adolescens cotidieque. Ex iisque aeterno imperdiet est, zril scaevola ad vis, ut vix idque option persequeris. Ius mucius possit referrentur ut. Possim fierent te eos, eum odio deterruisset ei, eloquentiam repudiandae vim at. Ea vim civibus dignissim argumentum, cibo principes forensibus mei at, dicam minimum ex usu.

Suas dicat mucius te duo, iusto elaboraret necessitatibus mel ei. Ad eos dicta denique, ad eirmod verterem consequuntur his. Te civibus volutpat concludaturque has, duo nonumes deserunt contentiones cu. No his veri primis efficiendi. Alii indoctum ut sit, quo tale nulla exerci no, est ei quaeque necessitatibus. Per et scripta appellantur.

No nec esse dissentiunt, ex cum saperet detracto dignissim. Usu cu simul impetus perpetua, mea et labores senserit. Nec in brute officiis. Magna tantas altera eos in, ludus neglegentur vix ut. Vocibus mentitum et sea, sed iudico erroribus ex, usu ei impedit verterem.
  <a href="javascript:void(0)" class="read_more">Read more &raquo;</a>
</p>




Reference:
http://jsfiddle.net/sTe5P/5/

Hi Chirag,
I stumbled upon the same problem & implemented a solution that I believe is quite elegant.
See my solution on http://stackoverflow.com/questions/25187774/read-more-and-read-less-with-dotdotdot-jquery/29118739#29118739

adrien-be,
Don't know whether you ever check this site, but I wanted to try to reach you to say how great your approach to dotdotdot is. It is the only one I have found that deals with all the issues others have overlooked (such as two blocks of text one above the other on the page). At first I noticed that if text was truncated in the middle of <strong... or ... HTML markup, it did not work right, but then I discovered by adding "strong" and "em" to dotdotdot, it is fine. So I want to thank you for this solution to the more/less text issue. I have been trying to add a fadein/fadeout so that the full text doesn't appear immediately but haven't figured that one out yet--the expanding and contracting of text doesn't seem to occur in one single place in your code.
Jim Dutton