using javascript to hide and show menu ids

Question

Hi Im using wordpress and i have a navigation.

I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.

Currently my wp_nav_menu is in a nav container in its own div.

Any help would be really appreciated. I need this to be totally dynamic.

I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...

Thanks folks

Answer 1

Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.

$( "#idOfParent" ).on( "click", function () {
    $(this).children().toggleClass("HideNav").toggleClass("ShowName");
}

Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.