Creating a 3 level accordion menu

JavaScript
1

Hi and thanK you in advance for your help.

I have created a 3 level menu in wordpress and wp_nav_menu

so in my theme i get something like this

<ul id=“menu” class=“menu”>
<li><a>Sub item A</a>
<ul class=“submenu”>
<li>sub sub item a</li>
<li>sub sub item b</li>
<li>sub sub item c</li>
</ul>
</li>

&lt;li&gt;&lt;a&gt;Sub item b&lt;/a&gt;
   &lt;ul class="submenu"&gt;
       &lt;li&gt;sub sub item e&lt;/li&gt;
       &lt;li&gt;sub sub item f&lt;/li&gt;
       &lt;li&gt;sub sub item g&lt;/li&gt;
   &lt;/ul&gt;

</li>
</ul>

And I use this jquery to make it behave like an accordion

$(“.sub-menu”).hide();
$(“.current_page_item .sub-menu”).show();
$(‘#menu li a’).click(
function() {
var checkElement = $(this).next();
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#menu ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenu();});

.current_page_item is the class that wordpress automatically assigns to the current menu item, and I use the above jquery code to make the First level submenu to appear a selected and open when the user navigates in the current page

But when user is selecting a second level menu although the second level list is expanded the first level hides again…

This is a newbie javascript question, please some advice will be hellpfull

Thank you in advance

2

Can you help me understand your problem better? The first thing I did was correct your .sub-menu class (notice the hyphen in your JavaScript versus no-hypen in your HTML).

Doing so, I get the following:

As far as I can tell, it seems to work, what exactly is it that you need help with?

3

Well it works for the second level but not for the third level menu

the third level expands but the second level hides again!

4

Okay, problem fixed. In short, your #menu ul:visible was targeting ALL menus that were visible (including the parent of a sub-item). I added .not(checkElement.parent().parent()). Now this works for 3 levels, may not work for 4 levels.

5

It works!!!

Thank you so much!

6

One more thing if you can help when i click the let say the
sub sub sub item c

how can i keep the accordion open?

probably using css i suppose

7

Okay, I just figured out about parentsUntil() which will let it work for infinite number of levels :slight_smile:

8

So it redirects to another page, and you want it to automatically open up all the way to sub sub sub item c right?

9

Yes thats it

10

Does the URL match the HREF value of sub sub sub item c?

11

yes it also gets a css class li class=current-menu-item

and the parent li the class=current-page-ancestor

12

See the following:

I added the following line:

$('.current-menu-item').parentsUntil('#menu').slideDown('normal');
13

yes!!! it works !!!

14

thank you so much

15

Your welcome.

16

Very nice work cpradio.

For educational purposes, what needs to be added so that you can retain the functionality of the menu, but you can toggle the slideup/down functionality?

Currently, if an element is active you can’t click it to toggle the slide function, you have to click a different element to get it to slide up.

17

Change

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
        }

To be:

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            checkElement.slideUp('normal');
            return false;
        }

As seen here: http://jsfiddle.net/4JusM/44/

18

Superb.

Guess I was over-thinking it.

Great job!