getfluid
3/9/2018 - 7:23 PM

Read more reveal full content

Read more reveal full content

<div class="comment more">
	Duis nisl nibh, egestas at fermentum at, viverra et purus.
	Maecenas lobortis odio id sapien facilisis elementum.
	Curabitur et magna justo, et gravida augue.
	Sed tristique pellentesque arcu quis tempor.
</div>
.morecontent span {
	display: none;
}
$(document).ready(function() {
  //read more links
  var showChar = 700;
  var ellipsestext = "...";
  var moretext = "more <i class='fa fa-angle-down'></i>";
  var lesstext = "less <i class='fa fa-angle-up'></i>";
  $('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

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

      var html = c + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function(){
    if($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});