Last updated on April 29th, 2020 at 03:40 am
Reading Time: < 1 minuteIf 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
