pure javascript toggle only once using data-getAttribute to to compare

Question

I have some issues i can't understand why it's not toggling when I click on the button it's toggling only once...? And i can't hid the element!!! how it should work sick on first button it shows the element click again hide element!

Link to jsFiddle

 //Short cuts function $(e) { return document.querySelector(e); } function $$(e) { return document.querySelectorAll(e); } // All elementis whit toggle-option class var toggle = $$(".toggle-option"); //Add EventListener to all buttons whit class toggle-option for (var i = 0; i < toggle.length; i++) { toggle[i].addEventListener('click', togller, false); } function togller() { //clicked element's atribut valuve var current = this.getAttribute("data-toggle-number"), hidden = $$(".hidden"); // looop to campare clicked elments's attribut's value whit hidden elements //value for (var i = 0; i < hidden.length; i++) { var hiddenAtr = hidden[i].getAttribute("data-toggle-number"); if (current == hiddenAtr) { if (hidden[i].hasAttribute("data-toggle-number")) { hidden[i].classList.toggle("hidden") } } } } 

 .search-bar { height: 50px; width: 50px; background-color: red; } .add-task-bar { height: 50px; width: 50px; background-color: blue; } .hidden { display: none; } 

 <button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button> <button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button> <div class="hidden search-bar option" data-toggle-number="1"></div> <div class="hidden add-task-bar option" data-toggle-number="2"></div> 

Answer 1

Change

hidden = $$(".hidden")

to

hidden = $$(".option")

Since class 'hidden' gets removed, it won't work anymore (but it still has class 'option'.)

Answer 2

You are trying to get the element through .hidden class to toggle but since hidden class is already toggled there will never be an element with the .hidden class to be retrieved. You shall access those elements with a common fixed class and that one happens to be the .option class. So change the line hidden = $$(".hidden"); to hidden = $$(".option");

Besides accessing the data attributes are much easily and faster done through the dataset API. Please see the below code.

  function $$(e) { return document.querySelectorAll(e); } // All elementis whit toggle-option class var toggle = $$(".toggle-option"); //Add EventListener to all buttons whit class toggle-option for (var i = 0; i < toggle.length; i++) { toggle[i].addEventListener('click', togller, false); } function togller() { //clicked element's atribut valuve var current = this.dataset.toggleNumber, hidden = $$(".option"); // looop to campare clicked elments's attribut's value whit hidden elements //value for (var i = 0; i < hidden.length; i++) { var hiddenAtr = hidden[i].dataset.toggleNumber; if (current == hiddenAtr) { if (hidden[i].hasAttribute("data-toggle-number")) { hidden[i].classList.toggle("hidden") } } } } 

  .search-bar { height: 50px; width: 50px; background-color: red; } .add-task-bar { height: 50px; width: 50px; background-color: blue; } .hidden { display: none; } 

 <button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button> <button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button> <div class="hidden search-bar option" data-toggle-number="1"></div> <div class="hidden add-task-bar option" data-toggle-number="2"></div> 

And a simplified ES6 version of this code would be as folows. Note that since in the arrow functions this will remain bound to the enclosing context there is no need for current as var current = this.dataset.toggleNumber;

 function $$(e) { return document.querySelectorAll(e); } Array(...$$(".toggle-option")).forEach(e => e.addEventListener('click', togller, false)); function togller() { Array(...$$(".option")).forEach(e => { (e.dataset.toggleNumber == this.dataset.toggleNumber) && e.classList.toggle("hidden")}); } 

  .search-bar { height: 50px; width: 50px; background-color: red; } .add-task-bar { height: 50px; width: 50px; background-color: blue; } .hidden { display: none; } 

 <button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button> <button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button> <div class="hidden search-bar option" data-toggle-number="1"></div> <div class="hidden add-task-bar option" data-toggle-number="2"></div>