Question

Im having a website with long paragraphs, and Im looking for a way to make the initial presentation shorter, so I would like a plugin that gives me the option to expand/contract the text.

I already found something similar, like this: http://jtsnake.github.com/jquery-readmore/ but it doesnt do the rollback funciton.

Is there something similar I could use? Thanks all.

Answer 1

I’d actually never made a plugin for this sort of action, so I decided I’d give it a shot, here’s what I came up with ->

function($){
  $.fn.clipped = function(options){ 
    var settings = $.extend({
      'text' : this.text(),
      'start' : 0,
      'end' : 255,
      'showFrom': 255,
      'readMoreText': 'Read More',
      'readLessText': 'Read Less'     
    }, options);

  return this.each(function(){
    var $this = $(this);
        var origTxt = settings.text;
    var clippedTxt = origTxt.slice(settings.start, settings.end) + "<div class='read-hidden' style='display:none;opacity:0;'>" + $this.text().slice(settings.showFrom) +"</div><span class='read-clipped'>....<a href='#' class='read-click'>"+settings.readMoreText+"</a></span>";
    $this.html(clippedTxt);

    $('body').on('click', 'a.read-click', function(){
      if($('.read-hidden').css('display') == 'none'){
            //true returned, make changes as necessary.
        $('.read-clipped a').text(settings.readLessText).appendTo($(this).parent('p'));

        //display the rest of the text        
        $('.read-hidden').css('display', 'inline');
        $('.read-hidden').animate({
          opacity:1
        }, 500); 
          //element is shown already, replace the text on next click.  
      }else if($('.read-hidden').css('display') == 'inline'){
        $('.read-hidden').animate({
          opacity:0  
        }, 500, function(){
          $('.read-hidden').css('display', 'none');
          $this.html(clippedText);      
        });
       }
     });
   });
  }
})(jQuery);

Invoking the plugin is fairly straight forward ->

$('#element').clipped({ 
  // clip text at
  'start': 0, 
  //end clipped text at
  'end': 255, 
  //display the rest of the text starting from
  'showFrom': 255, 
  //Read More Text
  'readMoreText' : 'Read More Stuff',
  //Read Less Text 
  'readLessText' : 'Read Less Stuff'
 });