Скрыть все блки кропе первых 3 блков и добавить кнопку показать все?

Question

[skd-coding]

Добрый день,

как сделать проверку в главном блоке,
если в главноми блоке больше чем 6 дочерних блоком (все остольные кроме первых 6 блокуов) скрыть и отобразить кнопку показать больше?

<div class="global-box">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="all-show">Показать все</div>
</div>

Comments

[Сергей Соколов]

Получить элемент .global-box, в нём найти все .items, сосчитать их.
Если больше 3, пройти циклом по коллекции .items и добавить класс hidden всем, начиная с 4-го; показать кнопку .all-show. Повесить на кнопку слушатель события нажатия, в котором убрать класс hidden у всех items и спрятать кнопку.
Если меньше 3, добавить класс hidden только кнопке.

Как вы начали это делать и где застряли?

[Сергей Соколов]

Ещё можно подумать в сторону CSS селектора:

div.item:nth-child(n+4) {
  display: none;
}

спрячет все после 3-го.

[skd-coding]

Сергей Соколов,

через css (:nth-child(n+7)) я скрыл все блоки
потом с помощью if (jquery) попробывал так

var menge = $( ".global-box" ).length;

if ( menge > 6 ){
    $(".global-box").addClass("gb-6");
    $(".global-box .all-show").fadeIn(600);
}

я плоха знаю jquery

[skd-coding]

вроде как все получилась

var menge = $( ". global-box .item").length;

if ( menge > 6 ){
    $(".global-box .item:nth-child(n+7)").fadeOut(600);
    $(".global-box .all-show").fadeIn(600);
  
    $(".global-box .all-show").on('click', function(){
    	$(".global-box .item:nth-child(n+7)").fadeIn(600);
    });
}

спасибо за помощь