I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time.
Below is the code snippet I've been working on:
HTML:-
<nav class="clearfix">
<ul>
<li class="navTab marginRight">
<a><span class="iconFont">v</span></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
<li class="navTab marginRight">
<a><span class="iconFont">v</span></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
<li class="navTab">
<a><span class="iconFont">v</span></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
</nav>
CSS:-
.navTab ul.visible {
visibility: visible;
}
.navTab ul {
display: inline;
visibility: hidden;
padding: 0px;
z-index: 200;
position: absolute;
left: 0;
}
jQuery:-
$(document).ready(function(){
var list = $('.navTab ul');
$('li.navTab').click(function(){
var thatIndex = $(this).index();
list.not( ':eq(thatIndex)' ).removeClass('visible');
list.eq(thatIndex).addClass('visible');
});
});