I am working on a navigation and now managed to open up deeper levels of a certain parent one by one on click but I have a hard time trying to figure out how to close all others when going into a another direction.
Let’s say you have A1, A2A, A3A and A4A open and you click on B1, then I want A1A, A2A and A3A to close. But it also needs to work midway: let’s say you have A1, A2A, A3A and A4A open but you click on A2B then A3A and A4A need to close.
$('li.has-children').click(function(){
$(this).children('.wrap').addClass('active');
});.wrap {
display:none;
}
.active {
display:inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="has-children">
<a class="">link A1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children">
<a class="">link A2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children">
<a class="">link A3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children">
<a class="">link A4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children">
<a class="">link A2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children">
<a class="">link A2B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children">
<a class="">link A3B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children">
<a class="">link B1</a>
<div class="wrap wrap-0">
<ul>
<li class="has-children">
<a class="">link B2A</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children">
<a class="">link B3A</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children">
<a class="">link B4A</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="has-children">
<a class="">link B2B</a>
<div class="wrap wrap-1">
<ul>
<li class="has-children">
<a class="">link B3B</a>
<div class="wrap wrap-2">
<ul>
<li class="has-children">
<a class="">link B4B</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>