How to make 4 blocks appear?

  • 0
    how to give style = "display: block" to 4 blocks. The first 6 blocks are open in the mobile version, how to add 4 blocks by clicking on the button, and when they run out, remove the button?
    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-01.png" alt="project"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-02.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-03.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-04.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-05.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-06.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-07.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-08.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-09.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-10.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-11.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-12.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-13.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
                    <div class="portfol">
                        <div><a href="##"><img src="img/progects/photo-14.png" alt="portfolio"></a></div>
                        <div class="textPortf">Website</div>
                    </div>
     <div class="PortfButt"><a>load more projects</a></div>


    .portfol:nth-child(-n+6) {
                    display: block;
                }


    $(".PortfButt").click(function () {
                var portfol = $(".portfol");
                var i = 5;
                if (i <= portfol.length) {
                   for (let a = i+4; a >= i; a--) {
                       console.log(i ,a);
                       $(portfol[a]).css("display", "block");
                   }
               }
               else {
                   $('.PortfButt').remove;
               }
            });



    JavaScript Anonymous, Mar 15, 2020

  • 1 Answers
  • 0
    Move the variable i outside the function, it resets to 5 each time you press it
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!