READ MORE LESS BUTTON SHORTCODE

functions.php

<?php
add_shortcode('read_more_less', 'read_more_less_button_handler');
function read_more_less_button_handler( $attrs, $content ){
	$title = $attrs['title'];

	if( !$title )
		$title = "Learn More";

	return '
	<div class="readmorelessbutton-container">
		<div class="readmorelessbutton-content">
			'.$content.'
		</div>

		<div class="readmorebutton readmorelessbutton">
			<div><span>'.$title.'</span></div>
		</div>
	</div>
	';
}

script.js

// READ MORE LESS BUTTON
$('.readmorelessbutton').each(function(){
  var position = -1;
  var initialScroll = -1;

  $(this).unbind('click').bind('click', function(){
	let $container = $(this).closest('.readmorelessbutton-container'),
	  $button = $(this).find('span'),
	  $text = $button.text(),
	  $content = $container.find('.readmorelessbutton-content');

	if( $content.hasClass('show-content') ){
		jQuery($content).slideToggle(500, 'swing', function () {
			$(this).removeClass('show-content');
			$button.text('Read More');
		});

		var currentScroll = document.documentElement.scrollTop;
		var scrollDifference = currentScroll - initialScroll;

		if (position != -1 && scrollDifference) {
			jQuery("html,body").animate({scrollTop: document.documentElement.scrollTop-scrollDifference}, 500, 'swing');
		}
	}else{
		initialScroll = document.documentElement.scrollTop;
		position = $content.offset().top;
		jQuery($content).slideToggle(500, 'swing', function () {
			$(this).addClass('show-content');
			$button.text('Read Less');
		});
	}
  });
});