Как можно реализовать чтобы элементы показывались «порциями» при клике если заранее я прописал в стилях что они все скрыты а странице стилями?

Question

[Superhero_a]

добрый день!
нужно чтобы по клику показывалась новая "порция элементов", по умолчанию видно 5 элементов, раз кликнули на кнопку - показались еще 5 элементов 2й раз кликнули еще 5 и тд.

реализовал с помощью css и js. по клику на кнопку происходит добавление класса "show" элементам с классом "some_product" , но вот только все элементы открываются одним кликом:(

<button class="show-else">Show else</button>

<script>
        $(function(){


var blockIsActive = localStorage.getItem("blockIsActive");
if (blockIsActive == "true") {
    $('.some_product').addClass('show');
}



            $('.show-else').click(function(){
                $('.some_product').addClass('show');
               localStorage.setItem("blockIsActive", "true");
            });


        });
</script>

<style>
div.some_product {
display: none;
}

div.some_product:nth-child(-n+5) {
display: inline-block;
background: pink;
}

div.some_product.show {
display: inline-block;
}

</style>

НО таким образом показываются по клику сразу все элементы скрытые, как можно реализовать чтобы показывались "порциями" при новом клике если заранее я прописал в стилях что они все скрыты?
и еще в скрипте я прописал сохранение стиля, но этот код присваивает новый класс всем страницам если хотя бы на одной нажать "Show else", можно ли как то сделать чтобы сохранял этот стиль только на одной странице на которой я сейчас нахожусь?

Answer 1

[Alams Stoyne]

$(function(){
      $('.some_product').addClass('hide');
      $('.some_product.hide:lt(5)').removeClass('hide');

      $('.show-else').click(function(){
            $('.some_product.hide:lt(5)').removeClass('hide');
      });
});

div.some_product {
      display: inline-block;
}
div.some_product.hide {
      display: none;
}
div.some_product:nth-child(-n+5) {
      background: pink;
}

Comments

[Superhero_a]

Alams Stoyne, отлично! работает! спасибо!