[jQuery Read More] #jquery

read-more.css

.description .more--content span {
  display: none;
}
.description .more--link {
  display: block;
}

read-more.js

(function($) {
  
  // Usage:
  /*
  <div class="description">
  	<p class="more-text">
    	<?php echo $content ?>
    </p>
  </div>
  */

  jQuery(function() {
    // Configure/customize these variables.
    var showChar = 50;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Read more";
    var lesstext = "Read less";


    $('.description p').each(function() {
      var content = $(this).html();

      if(content.length > showChar) {

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

        var html = c + '<span class="more--ellipses">' + ellipsestext+ '&nbsp;</span><span class="more--content"><span>' + h + '</span> <a href="" class="more--link">' + moretext + '</a></span>';

        $(this).html(html);
      }
    });

    $(".more--link").on('click', function(){
      if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
      } else {
        $(this).addClass("less");
        $(this).html(lesstext);
      }
      $(this).parent().prev().slideToggle();
      $(this).prev().slideToggle();
      return false;
    });
  });
})( jQuery );