tabs don't work properly

Question

I created tabs on JS and my script decided to deny working. I click on tabs - they don't work and content also is not hidden. Chrome shows NO bugs. Code should work without doubts but it seems an error somewere. All the classes such as 'hide', 'show' are created on external style.css file. Please, help !!

 var tab; var content; window.onload = function() { content = document.querySelector('.content'); tab = document.querySelector('.tab'); hideTabsContent(1); } function hideTabsContent(a) { for (var i = a; i < content.length; i++) { content[i].classList.remove('show'); content[i].classList.add("hide"); tab[i].classList.remove('active'); } } document.querySelector('.container').onclick = function(event) { var target = event.target; if (target.className == 'tab') { for (var i = 0; i < tab.length; i++) { if (target == tab[i]) { showTabsContent(i); break; } } } } function showTabsContent(b) { if (content[b].classList.contains('hide')) { hideTabsContent(0); tab[b].classList.add('active'); content[b].classList.remove('hide'); content[b].classList.add('show'); } } 

 .tab { cursor: pointer; } .active { color: white; background-color: green; } .show { display: block; } .hide { display: none; } 

 <div class="container"> <div class="tab active">Summer</div> <div class="tab">Autumn</div> <div class="tab">Winter</div> <div class="content"> <img src="img/pic-1.jpg"> <img src="img/pic-2.jpg"> <img src="img/pic-3.jpg"> </div> <div class="content"> <img src="img/pic-4.jpg"> <img src="img/pic-5.jpg"> <img src="img/pic-6.jpg"> </div> <div class="content"> <img src="img/pic-7.jpg"> <img src="img/pic-8.jpg"> <img src="img/pic-9.jpg"> </div> </div> 

Answer 1

Use querySelectorAll to return an array of elements or it returns just the first found element.

window.onload=function() {
    content=document.querySelectorAll('.content');
    tab=document.querySelectorAll('.tab');
    hideTabsContent(1);
}

Answer 2

Change the selection from querySelctor() to querySelectorAll() working example is below

 var tab; var content; window.onload = function() { content = document.querySelectorAll('.content'); tab = document.querySelectorAll('.tab'); hideTabsContent(1); } function hideTabsContent(a) { for (var i = a; i < content.length; i++) { content[i].classList.remove('show'); content[i].classList.add("hide"); tab[i].classList.remove('active'); } } document.querySelector('.container').onclick = function(event) { var target = event.target; if (target.className == 'tab') { for (var i = 0; i < tab.length; i++) { if (target == tab[i]) { showTabsContent(i); break; } } } } function showTabsContent(b) { if (content[b].classList.contains('hide')) { hideTabsContent(0); tab[b].classList.add('active'); content[b].classList.remove('hide'); content[b].classList.add('show'); } } 

 .tab { cursor: pointer; } .active { color: white; background-color: green; } .show { display: block; } .hide { display: none; } 

 <div class="container"> <div class="tab active">Summer</div> <div class="tab">Autumn</div> <div class="tab">Winter</div> <div class="content"> <span>1</span> <span>2</span> <span>3</span> </div> <div class="content"> <span>4</span> <span>5</span> <span>6</span> </div> <div class="content"> <span>7</span> <span>8</span> <span>9</span> </div> </div>