Limit and show more characters

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="limit-characters">
    <p>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptates ut ratione enim nam, rerum inventore, quo accusamus iste ab. Labore vel, blanditiis mollitia praesentium delectus voluptates alias minus maiores.</span>
      <a href="#" class="btn-show-more hidden">Ver más</a>
    </p>
  </div>
</div>

JavaScript

$(function(){
	
  var $charContent = $('.limit-characters').find('span');
  var textChar = $charContent.text().trim();
  var $btnShowMore = $('.btn-show-more');
  var maxChars = 100;
  
  function limitChar() {
  	if(textChar.length >= maxChars) {
      var truncText = textChar.substring(0,maxChars-3)+"...";
      $charContent.text(truncText);
      $btnShowMore.removeClass('hidden');
    }	
  }
  
  limitChar();
  
  function extendChar() {
  	$charContent.text(textChar);
    $btnShowMore.addClass('hidden');
  }
  
  $btnShowMore.on('click', function(){
    extendChar();
  });

});