Prevent 'load more' button when all content visible

Develop, Build & Integrate CMS Development
1

Hi

We have instances where the filtered list of post content is complete, yet the load more button is still appearing. Can anyone help with the code needed to disable or hide the button when all posts are present?

Here’s an example listing page:

Resources | Ardoq | Webinar

And the current code used for the button:

<script src="{{ get_asset_url('/Website 2020/Assets/JS/libraries/infinite-ajax-scroll.js') }}"></script>
<script>
$(document).ready(function(){
window.ias = new InfiniteAjaxScroll('.related-posts', {
item: '.listing-post',
next: '.next-posts-link',
pagination: '.blog-pagination',
trigger: {
element: function() {
let el = document.createElement('button');
el.innerText = 'Load More';
el.className = "ias-trigger";
document.querySelector('.related-posts').appendChild(el);
return el;
}
}
});
});
</script>

Thanks, Si

2

Hey, @SiJack :waving_hand: Thanks for your question!

Have you considered adding a check for whether all posts are already visible? By using a function that counts the total number of displayed posts, compares it to the total posts count, and then decides whether to display the ‘load more’ button.

Talk soon! — Jaycee

3

Hi @Jaycee_Lewis I have not considered that…simply because knowing how to create that function is a bit beyond my obscenely rudimentay capabilities :grinning_face_with_smiling_eyes:

Would you have any pointers?

Thanks so much!