load more

Hide “Load More” Button When All Items Displayed ?

Reading Time: < 1 minute

If You Want To Hide ‘load more’ Button When All Items Displayed Even Items Are 7 or 10 or 25…Just Hide ‘load more ‘ Button When All Items Loaded.

Both .size() and .length identify the number of items:

Note: This method has been removed in jQuery 3.0. Use the .length property instead.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function () {
     list_size = $("#List li").length; 
       x=4; 
            $('#List li:lt('+x+')').show(); 
	
            $('#loadMore').click(function () {  
               x= (x+3 <= list_size) ? x+3 : list_size;
               $('#List li:lt('+x+')').show(); 
               //hide loadmore when all items displayed  
               $(this).toggle(x < list_size);  
                                             }); 
							 }); 
   
</script>
<style>
	#List li{ display:none;
	}
	#loadMore {
		color:green;
		cursor:pointer;
	}
	#loadMore:hover {
		color:black;
	}
</style>

<body>
<ul id="List">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>  
	<li>six</li> 
    <li>seven</li>

</ul>
<div id="loadMore">Load more</div>
</body>
  • One
  • Two
  • Three
  • Four
  • Five
  • six
  • seven
Load more

1 thought on “Hide “Load More” Button When All Items Displayed ?”

Leave a comment