collapse-more.js

$('[data-extend]').each(function (index, element) {
	let configs = $.extend({
		target		: $(element).parent(),
		lesstext	: '',
		maxheight	: '200px',
		afterclose	: "none",
	}, $(element).data('extend')),
		moreText = $(element).html(),
		maxheight = $(configs.target).height();
	$(configs.target).css({
		'overflow': 'hidden',
		'height': configs.maxheight
	});
	$(element).on('click', function(e){
		e.preventDefault();
		$(configs.target).toggleClass('is-open');
		if( $(configs.target).hasClass('is-open') ){
			if( configs.lesstext.length > 0 ){
				$(element).html( configs.lesstext );
			} else {
				$(element).hide();
			}
			$(configs.target).animate({height: maxheight}, 500);
		} else {
			$(configs.target).animate({height: configs.maxheight}, 500);
			$(element).html( moreText );
		}
	});
});

//<button type="button" data-extend='{"target":"","lesstext": "","maxheight":""}'>OPEN</button>