caskew2154
2/17/2020 - 9:18 AM

Height Based Read More

Add a Read More/Read Less function to a specific div which appears based on it's height (> 400px by default).

.read-more {
	max-height: 400px;
	overflow: hidden;
	position: relative;
	transition: all 1s;
}
.read-more > * {
	z-index: 5;
}
.read-more:before {
	display: block;
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 15;
	background: linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,0.8) 90%, rgba(255,255,255,1) 93%);
}
.read-more__open {
	max-height: 2000px !important;
	margin-bottom: 10px;
}
.read-more__open:before {
	display: none;
}
.read-more__button {
	position: absolute;
	cursor: pointer;
	bottom: 0;
	z-index: 20;
	right: 0px;
	font-weight: 500;
}
add_action( 'wp_head', function () {
		if (is_product()) {
	?>		
	<script>
		var $ = jQuery;
		$(window).on('load', function() {
			function readMore() {
				$('.read-more').addClass('read-more__open');
				$('.read-more__button').off();
				$('.read-more__button').text('Read Less');
				$('.read-more__button').on('click', readLess );
			}
			function readLess() {
				$('.read-more').removeClass('read-more__open');
				$('.read-more__button').off();
				$('.read-more__button').text('Read More');
				$('.read-more__button').on('click', readMore );
			}
			
			if($('.product-page-sections .panel > div').height() > 400) {
				$('.product-page-sections .panel > div').addClass('read-more');
				$('.read-more').append("<div class='read-more__button'>Read More</div>");
				$('.read-more__button').on('click', readMore);
			};
		});
	</script>
<?php }});
<script>
		var $ = jQuery;
		$(window).on('load', function() {
			function readMore(id) {
				$('.read-more_' + id).addClass('read-more__open');
				$('.read-more__button_' + id).off();
				$('.read-more__button_' + id).text('Read Less');
				$('.read-more__button_' + id).on('click', readLess );
			}
			function readLess(id) {
				$('.read-more_' + id).removeClass('read-more__open');
				$('.read-more__button_' + id).off();
				$('.read-more__button_' + id).text('Read More');
				$('.read-more__button_' + id).on('click', readMore );
			}
			$('.product-page-sections .panel').each(function(index) {
				if($(this).height() > 400) {
				$(this).addClass('read-more_' + index);
				$('.read-more').append("<div class='read-more__button_" + index + "'>Read More</div>");
				$('.read-more__button').on('click', readMore(index));
			};
			})
			
		});
		
		
	</script>