I am trying to create a multilevel accordion using nested unordered list.
What I am trying to accomplish:
Show only the "active" ul (other remain hidden)
When there is a nested ul - toggle only the nested ul (2222 -> 2.1)
Full code here: http://pastie.org/852421
JS
$(document).ready(function() {
$('ul.menu li ul').hide();
$('ul.menu li a').click(function(e){
$('ul.menu li a').each(function(i){
if($(this).next().is("ul") && $(this).next().is(":visible")){
$(this).next().slideUp("fast");
}
});
var e = $(e.target);
if(e.next().is("ul") && e.next().is(":visible")){
e.next().slideUp("fast");
} else {
e.next().slideDown("fast");
}
});
});
HTML
<ul class="menu">
<li><a href="#">11111</a>
<ul>
<li><a href="#" id="one">1.1</a></li>
<li><a href="#" id="one">1.2</a></li>
</ul>
</li>
<li><a href="#">22222</a>
<ul>
<li><a href="#">2.1+ (problem)</a>
<ul>
<li><a href="#">2.1.1</a></li>
<li><a href="#">2.2.2</a></li>
</ul>
</li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li><a href="#">33333</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
</ul>