Load More Button with jQuery

Question

I recently approached to javascript and jQuery; I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made.

The code has been corrected in the following anwers

 $(function() { $(".Box-Hidden").slice(0, 8).show(); $("#loadMoreCont").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); if ($(".Box-Hidden:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); });

 .GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image 1 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="#" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="#"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>

Answer 1

When you use

$("#loadMoreCont").on(...)

it is supposed you have a html tag having the id with that name:

<div id="loadMoreCont">
...
</div>

When you use

$(".loadMoreCont").on(...)

it is supposed you have a html tag having the class with that name:

<div class="loadMoreCont">
...
</div>

Update

$(function () {
    $(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images

    $(".loadMoreCont").on('click', function (e) {

        e.preventDefault();
        $(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
        if ($(".Box-Hidden:hidden"). length == 0){
            $("#load").fadeOut ('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
});
});

Your code seems work fine. I commented out some interesting lines. Hope this helps.

Answer 2

your #loadMoreCont JS file on line 4 is targeted at an ID (#). but on your html loadMoreCont as a class (.)

Answer 3

The question is: " I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made"

Here the updated code after the kind correction of the users @Kurohige and @WkL

HTML

    <div class="GridContent">
      <div class="Portfolio">
        <!-----image 1 ------>
        <div class="Box-Hidden">
          <a href="#" class="SpanProp1">
            <div class="GridItemsCont">

              <img src="#" class="gridimg">
              <div class="infos infocolor1">
                <p>logo</p>
                <button>Learn More</button>
              </div>
            </div>
          </a>
        </div>
        <!-----image 2 ------>
        <div class="Box-Hidden">
          <a href="#" class="SpanProp2 ">
            <div class="GridItemsCont">
              <img src="#">
              <div class="infos infocolor2">
                <p>logo</p>
                <button>Learn More</button>
              </div>
            </div>
          </a>
        </div>

        <!-----total 16 images----->
      </div>
    </div>

<div class="loadMoreCont">
  <a href="#" id="loadMore">Load More</a>
  <a href="#"><img class="loadImg" src="images/arrow.png"></a>
</div>`

CSS

.GridContent {
  width: 100%;
  height: auto;
}

.Portfolio {
  width: 95%;
  height: auto;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 5px;
  padding-top: 4%;
}

.Box-Hidden {
  display: none;
}

JQUERY

<script>
    $(function () {
    $(".Box-Hidden").slice (0, 8).show();

    $(".loadMoreCont").on('click', function (e) {

        e.preventDefault();

        $(".Box-Hidden:hidden"). slice(0,2).slideDown();
        if ($(".Box-Hidden:hidden"). length == 0){
            $("#load").fadeOut ('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);



});
});
</script>
<script  src="jQuery/jquery-3.4.1.js"></script> 

Answer 4

Some issues in your code are that the classes and ID's are mixed up in the JS. In particular the loadMore button and how many items you're choosing to show via "slice". It would also help to use a more general or "semantic" friendly name for your containers instead of Box-Hidden because it's not always hidden and it's purpose is more like a card block, so naming it something like "card" might be best. The example below shows the Load More button and then disappears after displaying the rest of the cards.

 // slice is choosing the first 2 instances of "Box-hidden" and showing them $(".Box-Hidden").slice(0, 2).show(); // if there are Box-Hidden set to display:none (hidden) then show the loadMore button if ($(".Box-Hidden:hidden").length != 0) { $("#loadMore").show(); } $("#loadMore").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); // if there are no more hidden Box-Hidden's then hide the loadMore button if ($(".Box-Hidden:hidden").length == 0) { $("#loadMore").fadeOut('slow'); } // This is not related to the show more, this just brings you back up the page $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); });

 .GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image A ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=1"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image B ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=2"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 1 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=3" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=4"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>