my javascript code with classList.toggle doesn't work well

Question

i made a button that makes my div hide and visible. It works well once or twice but and then It doesn't (I click the button with column1 doesn't open the column 1's hidden div then I click the column2 column2's hidden div is opening....)

sorry for my bad english but I really wanna know why😂

 var tabList = document.querySelectorAll("li"); tabList.forEach(function(tab, index) { tab.addEventListener('click', function() { removeOther(); tab.classList.toggle("on"); btnEvent(tab); }); }); function removeOther() { for (var i = 0; i < tabList.length; i++) { if (tabList[i].classList.contains("on")) { tabList[i].classList.remove("on"); } } } var btn = document.getElementsByTagName("button")[0]; function btnEvent(tab) { var hiddenTabs = tab.querySelectorAll('.hidden'); btn.addEventListener("click", function() { for (var i = 0; i < hiddenTabs.length; i++) { hiddenTabs[i].classList.toggle("hidden"); } }) } 

 div { background: salmon; width: 50px; height: 50px; margin: 5px; display: none; } div.hidden, li.on div.hidden { display: none; } li.on div { display: block; } 

 <ul> <li class="on">column1 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> <li>column2 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> <li>column3 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> </ul> <button>click!</button> 

Answer 1

Please take a look at the following JS codesnippet

 var tabList = document.querySelectorAll("li"); // move btn selector to the top of the script part var btn = document.getElementsByTagName("button")[0]; tabList.forEach(function(tab, index) { tab.addEventListener('click', function() { removeOther(); tab.classList.toggle("on"); btnEvent(tab); }); // initially run the click event on the first tab element if (index < 1) tab.click(); }); function removeOther() { for (var i = 0; i < tabList.length; i++) { if (tabList[i].classList.contains("on")) { tabList[i].classList.remove("on"); } } } function btnEvent(tab) { // add .not-hidden, to mark .hidden elements, var hiddenTabs = tab.querySelectorAll('.hidden,.not-hidden'); // should be applied as onclick attribute // addEventListener adds a new Event at each time btn.onclick = function() { for (var i = 0; i < hiddenTabs.length; i++) { hiddenTabs[i].classList.toggle("hidden"); // toggle element class to .not-hidden while it is not hidden hiddenTabs[i].classList.toggle("not-hidden"); } } } 

 div { background: salmon; width: 50px; height: 50px; margin: 5px; display: none; } div.hidden, li.on div.hidden { display: none; } li.on div { display: block; } 

 <ul> <li class="on">column1 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> <li>column2 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> <li>column3 <div>box</div> <div>box</div> <div>box</div> <div class="hidden">box</div> <div class="hidden">box</div> <div class="hidden">box</div> </li> </ul> <button>click!</button>