Табы в JS. Как сделать так, чтобы при нажатии на кнопку повторно таб закрывался?

Question

[Александр Абаишвили]

В общем надо сделать так чтобы при нажатии на кнопку открывался таб(уже сделано), но при повторном нажатии он закрывался.
Песочница: https://jsfiddle.net/bcoja9xL/
Вот код JS:

const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");

tabsBtn.forEach(onTabClick);

function onTabClick(item) {
    item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTub = document.querySelector(tabId);

        if ( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });

            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });


            currentBtn.classList.add('active');
            currentTub.classList.add('active');
        }

    });
}

Буду очень благодарен за помощь:)

Answer 1

[generate]

Нужно проверить если данный таб активен то убрать класс актив

if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        }

Полный код

const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");

tabsBtn.forEach(onTabClick);

function onTabClick(item) {
        item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTub = document.querySelector(tabId);
        
        if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        } else if ( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });

            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });


            currentBtn.classList.add('active');
            currentTub.classList.add('active');
        }

    });
}

Comments

[Александр Абаишвили]

Спасибо!

[xidan]

Можно пример верстки пожалуйста, внедряю код, не срабатывает