chill-bundles/Resources/public/modules/tabs/tabs.js

/*
 * Remove active class on both elements: link and content
 */
let resetActive = function(links, contents)
{
    for (items of [links, contents]) {
        items.forEach(function(item) {
            if (item.classList.contains('active')) {
                item.classList.remove('active');
            }
        });
    }
}

/*
 * Count links array and return rank of given link
 */
let countNewActive = function(links, link)
{
    let rank = 0;
    for (let i = 0; i < links.length; ++i) {
        rank++;
        if(links[i] == link) {
            return rank;
        }
    }
}

/*
 * Set class active on both new elements: link and content
 */
let setNewActive = function(link, contents, rank)
{
    link.classList.add('active');

    count = 0;
    contents.forEach(function(pane) {
        count++;
        if (rank == count) {
            pane.classList.add('active');
        }
    });
}

/*
 * Main function
 */
window.addEventListener('load', function()
{
    tabParams.forEach(function(unit) {

        let
            tabPanel = document.querySelector('#'+ unit.id ),
            nav = tabPanel.querySelector('nav'),
            tabs = nav.querySelectorAll('ul.nav-tabs li.nav-item'),
            links = nav.querySelectorAll('ul.nav-tabs li.nav-item a.nav-link'),
            contents = tabPanel.querySelectorAll('div.tab-content div.tab-pane')
        ;

        if (unit.type == 'pill') {
            tabPanel.classList.add('pills');
        }

        // initial position
        setNewActive(links[unit.startPanel-1], contents, unit.startPanel);

        // listen
        links.forEach(function(link) {
            link.addEventListener('click', function()
            {
                resetActive(links, contents);
                setNewActive(link, contents, countNewActive(links, link));
            });
        });

    });
});