For toggle to work, we need to get all the node with class name -arrow-link-content, and then remove the nav-active class first, then add nav-active to the selected item.
Check the snippet.
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function() {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
return false
}
var el = document.querySelectorAll('div.-arrow-link-content');
for (var i = 0; i < el.length; i++) {
if (el[i].classList.contains('nav-active')) el[i].classList.remove('nav-active');
}
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
.-arrow-link-content {
display: none;
}
.nav-active {
display: block;
}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
Since at most one element can be open at a time, we just have to look for that one elment and close it first if it exists, before we open an unopened element
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
try {
// if an open element exists, close it first
this.parentNode.parentNode.querySelector('.nav-active').classList.remove('nav-active');
}
catch (error){
// Error occurs when no open elment exists, in that case: Do nothing
}
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
I want to make menu toggle and one item from menu is open at a time. I am able to open one item at a time but unable to do toggle at the same time.
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
if anyone have any suggestions.. please share.. Thanks in advance
@SwimmerF Can you share some basic example.. i am pretty new to javascript
@user3342682 I’m not gonna make an example from scratch, if you want code, give code
