Как скрыть блоки, в зависимости от количества потомков в родителе на JS?

Question

[Костя]

codepen.io/studenttsu/pen/zBxBxb

Вот начиная, допустим с 3-го потомка, скрыть все, которые ниже его в дереве, а по клику их показать.
но подразумевается, что это не конечное количество блоков, а может добавляться

Как это сделать? Помогите пожалуйста

Answer 1

[Bowen]

$items = $('.catalog__item');
$items.eq(2).nextAll().hide();
$('.show').on('click', function(){
    $items.toggle();
});

Answer 2

[Давид]

CSS:

.catalog__item{ display: none; }

.catalog__item:nth_child(1),
.catalog__item:nth_child(2),
.catalog__item:nth_child(3){ 
    display: block; 
}

HTML:
<button class="show-all">Показать</button>

JS/jQuery:

$('.show-all').on('click', function(){
    $('.catalog_item').css('display', 'block');
})