This tutorial tells you about the different options you have at hand to animate the accordion menu. Edit lib/js/template.js to set up these effects.

Accordion Menu Animation

There are two different modes to animate accordion menus. The default mode opens the next level of a separator menu item and closes the ones that are already open. The one called "slide" leaves the other ones open. To set it to default, it should look like this:

new YOOAccordionMenu('div#middle ul.menu li.toggler', 'ul.accordion');

To set it to "slide", it should look like this:

new YOOAccordionMenu('div#middle ul.menu li.toggler', 'ul.accordion', { accordion: 'slide' });