Tim Marshall Tim Marshall - 1 month ago 14
jQuery Question

Accordion Menu - One Open Only

I'm having some difficulties trying to get my jQuery accordion style menu to only display one open content at a time along with the

active
class only being set on the open menu options without the parent also being toggled.

This should be quite simple, however I appear to be somewhat rusty! I've made a snippet below of my working script which does not follow the rule I want to apply meaning you can expand all menu items to their maximum without any other menu items being collapsed.

I've browsed StackOverflow for answers however none which I have come across have resolved my problems, nevertheless I am certain this will be a duplicate of another question so my apologies in advanced!



$('.SideNav .Menu li a').click(function() {
if($(this).closest("li").children("ul").length) {
$(this).parent().toggleClass('active');
$(this).next().slideToggle('fast');
}
});

ul.Menu li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
<ul class="Menu">
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2 - I have siblings</a>
<ul>
<li><a href="javascript:;">2.1 - I have siblings</a>
<ul>
<li><a href="javascript:;">2.1.1</a></li>
<li><a href="javascript:;">2.1.2</a></li>
<li><a href="javascript:;">2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:;">2.2 - I have siblings</a>
<ul>
<li><a href="javascript:;">2.2.1</a></li>
<li><a href="javascript:;">2.2.2</a></li>
<li><a href="javascript:;">2.2.3</a></li>
</ul>
</li>
<li><a href="javascript:;">2.3</a></li>
</ul>
</li>
<li><a href="javascript:;">3 - I have siblings</a>
<ul>
<li><a href="javascript:;">3.1</a></li>
<li><a href="javascript:;">3.2</a></li>
<li><a href="javascript:;">3.3</a></li>
</ul>
</li>
</ul>
</div>





To clarify:



Upon clicking on the menu, all which are not part of the same tree I am wanting to slide back up including those on the same level if another sub-category is clicked on thus meaning if you are on
2 > 2.1 > 2.1.1
and then click on
2 > 2.1 > 2.1.2
then
2 > 2.1 > 2.1.1
will slide back up, click on
2 > 2.2
and all within
2 > 2.1
will slide back up.

Answer

i hope this will help.

$('.SideNav .Menu li a').click(function() {
  $(this).parent().siblings().find("ul").hide('fast');
	if($(this).closest("li").children("ul").length) {
		$(this).parent().toggleClass('active');
		$(this).next().slideToggle('fast');
	}
});
ul.Menu li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
  <ul class="Menu">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">2.1 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.1.1</a></li>
          <li><a href="javascript:;">2.1.2</a></li>
          <li><a href="javascript:;">2.1.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.2 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.2.1</a></li>
          <li><a href="javascript:;">2.2.2</a></li>
          <li><a href="javascript:;">2.2.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.3</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">3 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">3.1</a></li>
        <li><a href="javascript:;">3.2</a></li>
        <li><a href="javascript:;">3.3</a></li>
      </ul>
    </li>
  </ul>
</div>