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>