This tutorial is for specifically designed templates that have the accordion menu enabled. Please check your template settings to see if the template you are using has the accordion menu enabled.
In order to enable the accordion menu on your site you need to follow three key steps.
The accordion settings can be found in the template administrator under the effects panel. Ensure that the "enable accordion" menu item is enabled.
Other accordion menu settings explained:
Always open first item
This setting means that when the accordion is loaded on the page the first item in the menu will always be open.
Show active item
When enabled this option ensures that the active menu item will always be open on the page.
Accordion Type
The Accordion menu type means that when one menu item is opened then the previously opened item is closed. While the panel option means that when menu items are clicked open items remain open. In order to close each menu level the user needs to click on the top level menu item for that accordion level.
Now that the accordion menu scripts have been added it is necessary to add a module class suffix to the menu module. Adding the "accordion" module class to the module class suffix will automatically apply the correct code required to create the accordion menu.
The accordion menu is designed to be flexible enough to accomodate both normal content links or accordion triggers for any of the top level menu items.
Joomla provides two types of menu items that can be used as top level menu items in the accordion menu.
The Text Separator or menu heading menu type will both function as triggers for the accordion menu.
A typical accordion menu setup looks like the example in the screenshot below.