jQuery load first 3 elements, click “load more” to display next 5 elements

by dine

HTML

<div class="show-more-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius leo et sodales vulputate. Maecenas viverra purus neque, vitae luctus mauris porttitor ac. Duis lobortis lectus dui, et semper dolor facilisis id. Quisque a mi id diam lacinia euismod vitae in enim. Donec sodales quam massa, in molestie augue commodo ac. Proin hendrerit faucibus est, ac porta orci hendrerit sed. Quisque venenatis, libero non pulvinar venenatis, orci elit eleifend magna, quis dapibus mauris lacus sit amet dui. Duis vulputate elit ante, eleifend consequat sem pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tempus pretium feugiat. Duis laoreet scelerisque scelerisque. Curabitur erat dolor, elementum et dapibus a, imperdiet non augue.</p>
    <p>Nulla ullamcorper dictum est, sit amet cursus felis blandit sit amet. Vestibulum ut rutrum nulla. Ut ultricies facilisis nisi, ac laoreet mi. Aliquam erat volutpat. Curabitur dapibus magna id fermentum sollicitudin. Donec porta, turpis vitae condimentum cursus, est odio maximus orci, sed eleifend tortor sapien eget orci. In porttitor neque sit amet leo posuere facilisis id non enim. Nullam dignissim quam sit amet dictum cursus. Phasellus blandit turpis elit, sit amet condimentum est congue ut. Phasellus quis rutrum lectus, non porttitor quam. Sed nec fringilla magna, eget facilisis leo. Aliquam elementum velit mi, ut faucibus lacus tempus ut. Aenean mollis enim augue, vitae scelerisque ipsum ultricies id.</p>
    <p>Nunc nisi nunc, ullamcorper in diam vitae, sagittis fringilla ante. Mauris vitae lacus vitae orci scelerisque ornare. Nam sit amet imperdiet augue, vitae sagittis mauris. Proin erat quam, rutrum sit amet turpis aliquam, eleifend ornare ex. Aliquam aliquet iaculis leo, quis posuere magna fermentum in. Ut suscipit lorem in libero semper, a cursus odio tempus. Morbi vulputate nulla vel varius suscipit. Morbi eget sem et ipsum...

CSS

.show-more-text .is-text-cropped { 
  max-height: 125px;
  overflow: hidden;
  transition: max-height 1s ease;
}
.show-more-text .is-text-revealed { 
  max-height: 10025px;
}

JavaScript

$(document).ready(function () {
		var $mytext = $(".show-more-text");
    $mytext.wrapInner('<div class="is-text-cropped"></div>')
		$mytext.append('<a class="js-show-more">Show More</div>');
    $('.js-show-more').on('click', function(){
    	$('.is-text-cropped').addClass('.is-text-revealed')
    });
});