'OLX clone load more

I am working in OLX India clone in which I have created a Load More button. But the problem is that when I see the result, initially some of the items are not being hidden in the Load More button. So when I click on the Load More button, even when I have provided functionality to it using Javascript, it is not actually working, its effect is not being shown on my OLX clone. But CSS is working fine. Javascript:

$( document ).ready(function () {
  $(".moreBox").slice(0, 3).show();
    if ($(".blogBox:hidden").length != 0) {
      $("#loadMore").show();
    }   
    $("#loadMore").on('click', function (e) {
      e.preventDefault();
      $(".moreBox:hidden").slice(0, 6).slideDown();
      if ($(".moreBox:hidden").length == 0) {
        $("#loadMore").fadeOut('slow');
      }
    });
  });

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source