Load more items when clicked show link using jquery

Loading more items using Jquery

When the page loads I am displaying 5 items Initially. When I clicked show link which is placed on the bottom, it will show next 5 items. When all the items are displayed, I have to hide the show link further.

Solution:

Load more items when clicked show link using jquery

Script:


var itemsCount = 0;
 var itemsMax = 30;
 //var itemsMax = $("#totalcount").val();
 $('.product-section .item').hide();
function loadNextItems() {
 var pagination = 5;
 //var pagination = $("#initialcount").val(); 
 //var pagination = parseInt($("#initialcount").val()); 
 //parseInt
 for (var i = itemsCount; i < (itemsCount + pagination) ; i++) { $('.product-section .item:eq(' + i + ')').show(); //load 5 more items in every iteration } itemsCount += pagination; if (itemsCount > itemsMax) {
 $('#showmore').hide(); 
//hiding load more link after loaded the maximum count
 }
};
loadNextItems();
$('#showmore').on('click', function (e) {
 e.preventDefault();
 loadNextItems();
});
/* end load more items*/
});

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *