I am in search of creating a multi-level accordion menu. I have developed this menu ( http://codepen.io/anon/pen/ogdovx ) until now but I am fairly new to jquery and feeling stuck when it comes to advancing it further.
How can I enhance this? My requirement is for it to display only the items with sub UL's and collapse siblings/children when opened.
Any guidance on enhancing my code would be highly appreciated. Thanks!
Code snippet from codepen:
$(document).ready(function() {
$(".main > li > a").click(function() {
$('.main ul').slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
})
$(".main > li > ul > li > a").click(function() {
$('.main ul ul').slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
})
$(".main ul ul li > a").click(function() {
$('.main ul ul ul').slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
})
});ul.children {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main">
<li class="page_has_children">
<a href="#">Link</a>
<ul class="children">
<li class="page_has_children">
<a href="#">Sub Link</a>
<ul class="children">
<li>
<a href="#">Sub Sub Link</a>
<ul class="children">
<li><a href="#">Child Link</a>
</li>
<li><a href="#">Child Link</a>
</li>
<li><a href="#">Child Link</a>
</li>
</ul>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
</ul>
</li>
<li class="page_has_children">
<a href="#">Link</a>
<ul class="children">
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
</ul>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
</ul>
</li>
<li class="page_has_children">
<a href="#">Link</a>
<ul class="children">
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
</ul>
</li>
<li class="page_has_children">
<a href="#">Link</a>
<ul class="children">
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
<li><a href="#">Sub Link</a>
</li>
</ul>
</li>
<li class="page_has_children">
<a href="#">Link</a>
<ul class="children">