Let’s say you have a listing with a ton of information in the Description field. Rather than displaying all that information at once, this snippet adds a ‘Read More’ toggle for users who want to see the entire description.
The toggle appears once the content’s height exceeds 300 px, as defined in Line 3 of the code snippet.
JavaScript
jQuery(function($) {
var $desc = $('body.single-listing .block-field-job_description .content-block');
var collapsed_height = 300;
if (!$desc.length) return;
var $body = $desc.find('.pf-body');
if (!$body.length) $body = $desc;
if ($body[0].scrollHeight <= collapsed_height) return;
// Allows the content (e.g., links) to be clickable
$body.css({
'max-height': collapsed_height + 'px',
'overflow': 'hidden',
'transition': 'max-height 0.3s ease'
});
$desc.append('<a href="#" class="toggle-more">Read More</a>')
.on('click', '.toggle-more', function(e) {
e.preventDefault();
$desc.toggleClass('toggled');
$body.css('max-height', $desc.hasClass('toggled') ? 'none' : collapsed_height + 'px');
$(this).text($desc.hasClass('toggled') ? 'Read Less' : 'Read More');
});
});