With just a few lines of jQuery and a little HTML/CSS you can have a nice, collapsible jQuery accordion menu that expands on click. Here is a quick example:

Create an unordered list with your listed nav items and give the first ul an id so we can target it later. I’ll call mine #sidenav.

Now you can add some styles to the menu via CSS. An important thing to note here is giving the sub menus a display:none;

And now just a bit of jQuery to create the accordian. By adding a new class (active), you can see if there is a sub menu already open when a link is clicked – You can also use that class to style the opened menu.