Hide infiniteHits 'show-more' when no more results

I’m trying to use the infiniteHits widget however, I can’t figure out how to hide the “Show more” button when the number of results is lower than the hitsPerPage number.

Hi @damien,

Which InstantSearch flavour are you using?

I’m using InstantSearch.js with the following code:

    algoliaSearch.addWidget(
      instantsearch.widgets.infiniteHits
        container: '.box.asset-list'
        hitsPerPage: 24
        showMoreLabel: "Load more"
        templates:
          item: renderHit
          empty: noHitsTemplate
        cssClasses:
          item: 'asset card card-flex'
      )

Hi @damien,

In that case the showMore button should have a disabled pseudo-class that you can use to do some css styling.

1 Like

In the render code of my infinitescroll widget is use this:

 if ((params.helper.getPage() + 1) >= params.helper.lastResults.nbPages) {
				  //console.log('hiding');
		    	 jQuery('.ais-infinite-hits--showmore').hide();
		     } else if (params.state.page === 0) { // because '0' means we changed the query
		    	 //console.log('showing');
				 jQuery('.ais-infinite-hits--showmore').show();
		     }

I know this may be old but the easiest way of doing this is adding this css rule to your stylesheet

ais-infinite-hits--showmoreButton:disabled{
display: none;
}