There a 'load more/load less' function running on this page which I'm attempting to debug. /
You can see it the section with the heading "More About The Llewellyn Lodge"
The text is displayed via an ACF WYSIWYG field.
As far as I can see, the code is set to truncate the text after the fourth paragraph and on-click show the full text. However, instead of just truncating the text, it seems to remove the fourth paragraph entirely.
In essence, it displays paragraphs 1 - 3, [misses 4] and then displays paragraph 5 onwards.
Here's the jQuery function.
Grateful for any help, on how to simply truncate the text after the fourth paragraph.
jQuery(document).ready(function () {
jQuery('.read-more2').each(function(){
if(jQuery(this).children('p').length>4){
jQuery(this).children('p:lt(3)').show();
jQuery(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
jQuery('.read-more2').on("click",'.loadMore',function (){
jQuery(this).parent('.read-more2').children('p:gt(3)').show(); // use gt instead of lt
jQuery(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
jQuery('.read-more2').on("click",'.loadLess',function () {
jQuery(this).parent('.read-more2').children('p:gt(3)').hide(); // use gt instead of lt
jQuery(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});