@makssshow

Как сделать появление блоков по 4 штуки?

как давать style="display:block" 4 блокам. В мобильной версии открыты первые 6 блоков, как по нажатию на кнопку добавлять по 4 блока, а когда они кончатся, убрать кнопку?
<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;
           }
        });


5f930b86d29f7485014403.png
5f930ba3c1fd1366604836.png
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@Kostya10295
Вынесите переменную i за пределы функции, она у вас при каждом нажатии сбрасывается до 5
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы