Ceasar's component code

code.js

{
    
    window.onload = (() => {
        
        var sectorsArr = document.querySelectorAll('.squeezebox-sector');
        var sectors = calcite.nodeListToArray(sectorsArr);
        
        var sectorsUnderlayArr = document.querySelectorAll('.squeezebox-sector-underlay');
        var sectorsUnderlay = calcite.nodeListToArray(sectorsUnderlayArr);
        
        var sectorsTitleArr = document.querySelectorAll('.squeezebox-sector-title');
        var sectorsTitle = calcite.nodeListToArray(sectorsTitleArr);

        var sectorsContentArr = document.querySelectorAll('.squeezebox-sector-content');
        var sectorsContent = calcite.nodeListToArray(sectorsContentArr);

        
        sectors.forEach((sector, index) => {
            
            sector.addEventListener('click', ((event) => {
                
                let sectorTitle = sector.querySelector('.squeezebox-sector-title');
                let sectorContent = sector.querySelector('.squeezebox-sector-content');
                let sectorUnderlay = sector.querySelector('.squeezebox-sector-underlay');
                let sectorMapPins = sector.querySelector('.map-pins');
                
                if(sector.classList.contains('is-active')) {
                    
                    sectorContent.classList.remove('is-expanded');
                    
                    setTimeout(() => {                        
                        sectors.forEach((s) => {
                            sectorTitle.classList.remove('hide');
                            s.classList.remove('is-inactive');
                            s.classList.remove('is-active');
                            sectorUnderlay.classList.remove('is-invisible');
                        });
                    }, 250);
                    
                }else{
                    
                    //Reset all element states
                    //when a sector is selected
                    sectors.forEach((s, index) => {
                        s.classList.add('is-inactive');
                        s.classList.remove('is-active');
                    });
                    
                    sectorsUnderlay.forEach((u) => {
                        u.classList.remove('is-invisible');
                    });

                    sectorsContent.forEach((c) => {
                        c.classList.remove('is-expanded');
                    });
                    
                    sectorsTitle.forEach((t) => {
                        t.classList.remove('hide');
                    });
                    
                    //Expand current sector and set active
                    //and visible states.
                    sector.classList.remove('is-inactive');
                    sector.classList.add('is-active');
                    sectorUnderlay.classList.add('is-invisible');
                    sectorTitle.classList.add('hide');
                    sectorContent.classList.remove('hide');
                    
                    //Expand animate content box area
                    setTimeout(() => {
                        sectorContent.classList.add('is-expanded');
                    }, 250);
                    
                }
                
            }));
            
        });
        
    });
    
}