DanWebb
7/31/2015 - 6:58 AM

Add a read more link to any text block

Add a read more link to any text block

  $.fn.extend({
    readMore: function(truncate) {
      return this.each(function() {
        var $self = $(this);
        var originalText = $self.text();

        if(originalText.length<=truncate) return;
        
        $self.text($.trim(originalText).substring(0, truncate));
        
        $self.append('<span class="read-more">...<a href="#">Read more</a></span>');
        
        $self.find('a').click(function(e) {
          e.preventDefault();
          $(this).parents('span').after(originalText.substring(truncate, originalText.length));
          $(this).parents('span').remove();
        });
      });
    }
  });
  
  // example usage
  $(function() {
    
    // read more on product description, truncate from 90 characters
    $('.product-description p').readMore(90);
    
  });