THIS EXPANDER DOES NOT WORK WELL IN FLOATED CONTENT, BUT DOES ACCEPT JAVASCRIPT EVENTS IN THE HIDDEN CONTENT (AS IT DOES not STRIP OUT HEE HIDDEN CONTENT, LIKE THE OTHER EXPANDER IN THIS FOLDER. READ MORE/LESS BAR IS DIFFICULT TO STYLE, THOOUGH.)

1. ENSURE YOU HAVE A LINK TO JqUERY LIBRARY IN YOUR THEME (WORDPRESS COMES STANDARD WITH THIS).

2. INCLUDE THIS JS IN THE PAGE OR IN YOUR SCRIPTS.JS FILE (NO NEED TO REPLACE "$" WITH "JQUERY" AS OUTER FUNCTION TAKES CARE OF THIS. ALSO DON'T INCLUDE SCRIPT TAGS):

<script>
(function ($) {
    $.fn.expandable = function(params) {
		var $this = $(this);

		if (params === undefined || params === null) {
			params = {};
		}

		var defaults = {
			'height': 200,
			'more': 'Show more',
			'less': 'Show less',
			'no_less': false,
			'offset': 0,
			'animation_duration': 250,
			'expand_responsive': 0
		};

		for (var k in defaults) {
			if (!params.hasOwnProperty(k)) {
				params[k] = defaults[k];
			}
		}

		var $expand_bar = $('<a class="expand-bar"><span class="more">' + params.more
			+ '</span><span class="less" style="display: none">' + params.less
			+ '</span><i></i></a>');

		$expand_bar.on('click', function(){
			var $root = $(this).closest('.expandable');
			var $wrap = $root.find('.expandable-init');
			var $more = $(this).find('.more');
			var $less = $(this).find('.less');

			if (params === undefined || params === null) {
				params = $wrap.data('expand_params');
			}

			if ($root.hasClass('expanded')) {
				$root.css('height', $wrap.outerHeight(true));
				setTimeout(function() {
					$root.css('height', params.height);
				}, 1);

				$less.hide();
				$more.show();
				$root.removeClass('expanded');
			} else {
				$root.css({
					'height': $wrap.outerHeight(true)
				});
				$less.show();
				$more.hide();

				setTimeout(function(){
					$root.css('height', 'auto');
				}, params.animation_duration);

				$root.addClass('expanded');

                if (params.no_less) {
                    $(this).hide();
                    $(this).unbind('click');
                    $wrap.unbind('expandable_resize')
                }
			}
		});

		function checkHeight($elem) {
			var oh = $elem.outerHeight(true);
			var $root = $elem.parent();

			var $expand_bar = $root.find('.expand-bar');

			var params = $elem.data('expand_params');
			if (params === undefined || params === null) {
				params = {
					'offset': 0,
					'height': defaults.height
				}
			}

			if (params.expand_responsive > 0 && params.expand_responsive > window.innerWidth) {
				$root.css('height', 'auto');
				$expand_bar.hide();
				return;
			}

			if (oh <= params.height + params.offset) {
				$root.css('height', 'auto');
				$expand_bar.hide();
			} else {
                if (!$root.hasClass('expanded')) {
                    $root.css('height', params.height);
                }
				$expand_bar.show();
			}
		}

		for (var i = 0; i < $this.length; i++) {
			var $elem = $($this[i]);

			if ($elem.hasClass('expandable-init')) {
				continue;
			}

			$elem.addClass('expandable-init');

			if ($elem.css('padding-top') === '0px') {
				$elem.css('padding-top', '1px');
			}

			if ($elem.css('padding-bottom') === '0px') {
				$elem.css('padding-bottom', '19px');
			}

			var $root = $('<div class="expandable" />');
			$elem.on('expandable_resize', function(){
				checkHeight($(this));
			});

			$root.insertBefore($elem);
			$elem.detach();
			$root.append($elem);

			$root.css({
				'overflow': 'clip',
				'position': 'relative',
				'height': params.height
			});

			$elem.data('expand_params', params);

			$root.append($expand_bar.clone(true));
		}

		function onResize() {
			$this.trigger('expandable_resize');
		}
		$(window).on('resize', onResize);
		onResize();

		return $this;
	};
 })(jQuery);
    
</script>

<style>
.expandable {
    transition: all 250ms ease-in-out;
}
.expandable .expand-bar {
    position: absolute;
    display: block;
    left: 0px;
    bottom: 0px;
    background-color: white;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
}
.expandable .expand-bar::before {
    position: absolute;
    width: 100%;
    height: 20px;
    top: -20px;
    left: 0px;
    display: block;
    content: "";
    background: rgba(237,237,237,0);
    background: linear-gradient(to bottom, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
 }
.expandable .expand-bar i {
    transition: all 250ms ease-in-out;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    transform: rotate(-90deg);
}
.expandable.expanded .expand-bar i {
    transform: rotate(90deg);
}
.expandable .expand-bar i::before, .expandable .expand-bar i::after {
    position: absolute;
    width: 10px;
    height: 1px;
    background: #1d1d1d;
    content: "";
    left: 5px;
}
.expandable .expand-bar i::before {
    transform: rotate(45deg);
    top: 13px;
}
.expandable .expand-bar i::after {
    transform: rotate(-45deg);
    top: 6px;
}
.expandable .expand-bar span{
    color: red;
    font-weight: 700;
}
</style>


3. INCLUDE THIS FUNCTION CALL EITHER AFTER THE ABOVE JAVASCRIPT OR ON THE PAGE WHERE YOU WANT READ MORE/LESS TO BE AVAIALBLE:

<script>
jQuery(document).ready(function() {
    jQuery('.description').expandable({
        height: 350, //height you want BEFORE "read more" button
        more: 'Read more', //text you want for read more
        less: 'Read less'  //text you want for read less. See "defaults" on line 16 above for more parameters--don't know what all of them do as I lost the original of this script
    });
});
</script>


4. INCLUDE THIS STRUCTURE IN YOUR HTML WHERE YOU WANT THE READ MORE TO BEGIN (both classes are needed):


<div class="description to-expand">
    
</div>