Check out this basic accordion-style menu: http://jsfiddle.net/JqJce/1/
<ul class="nav level-1">
<li><a href="#">Link</a></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-3">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
</ul></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
</ul>
a {
display:block;
background:#aaa;
border:1px solid #ccc;
padding:5px;
color:#fff;
}
li li {
display:none;
}
/* Open/Closed indicators */
.has-submenu > a:after {
content:' + ';
}
.has-submenu .nav-open:after {
content:' - ';
}
li li a {
padding-left:40px;
background:#888;
}
li li li a {
padding-left:80px;
background:#333;
}
This is what needs to happen:
- Clicking on a link with a submenu should make the submenu slide down
- If an open submenu's link is clicked again, it should collapse
- Only one top-level submenu should be visible at a time (showing multiple "level 2" or "level 3" menus simultaneously is fine)
- Closed menus should display
+, while open menus should display- - The HTML markup cannot be changed, unfortunately
Current implementation:
$('.has-submenu > a').on('click', function(e){
e.preventDefault();
$(this).toggleClass('nav-open');
$(this).next('ul').find('> li').slideToggle();
});
The above code successfully opens and closes menus. However, I'm struggling to close other level-1 menus when a new one is opened and change the icon accordingly. I've been trying to solve this for a while but can't seem to find the solution. Any help would be greatly appreciated!
Can someone assist? Feel free to ask if you need more information. http://jsfiddle.net/JqJce/1/