Guntar Wi Guntar Wi - 7 months ago 22
HTML Question

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

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

Change

hidden = $$(".hidden")

to

hidden = $$(".option")

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