show-more

by Christian Unigarro

HTML

<div>
  <span class="js-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ab distinctio, ad ex odit modi praesentium, dolor, nesciunt tempora labore minus adipisci vitae, voluptas iure a ducimus accusamus nostrum laudantium.
  </span>
  <a class="js-show-more" href="">Ver más</a>
</div>

JavaScript

const contentContainer = document.querySelector('.js-content');
const completeContent = contentContainer.textContent.trim();

const completeContentArr = completeContent.split(' ');
const shortContent = completeContentArr.slice(0, completeContentArr.length / 2).join(' ');

const showMoreBtn = document.querySelector('.js-show-more');
let showMore = false;

showMoreBtn.addEventListener('click', function(event) {
	event.preventDefault();
  contentContainer.innerHTML = showMore ? completeContent : shortContent;
	showMore = !showMore;
});