I am struggling with some issues regarding toggling. When I click on the button, it toggles only once and I can't seem to hide the element either! It should work in a way that when I click on the first button, it shows the element and clicking again should hide the element!
//Shortcut functions
function $(e)
{
return document.querySelector(e);
}
function $$(e)
{
return document.querySelectorAll(e);
}
// All elements with toggle-option class
var toggle = $$(".toggle-option");
//Add EventListener to all buttons with class toggle-option
for (var i = 0; i < toggle.length; i++)
{
toggle[i].addEventListener('click', togller, false);
}
function togller()
{
//clicked element's attribute value
var current = this.getAttribute("data-toggle-number"),
hidden = $$(".hidden");
// loop to compare clicked element's attribute value with 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>