The way that this script is coded should make it fairly easy to add the functionality to existing menus within your page.
To create our collapsible menu we first need to add the menus to the web page. Basically each menu consists of a heading (I used the h5 tag) and an unordered list. The menus are simply coded in the HTML where ever we want them to appear.
To these menus we add an id tag into each heading. For the script to work these ids all have to consist of the word "menu" followed by a number. The numbers must be consecutive starting from one.
The last thing to do is to wrap each group of menus inside a div with a class of "mC". Where the menus appear one immediately after the other one wrapper is sufficient. Where there are other headings and lists in between you need to wrap the groups of menus separately so that there is no code inside the divs that doesn't belong to the menus but which may be mistaken for part of one.
Here's what a group of collapsible menus might look like after you have applied all of these adjustments.
As you can see, the changes to the HTML that would display the menus as ordinary lists that we need to make to accommodate the script are minimal. To apply this script to your menus to make them collapsible you need to simply add the wrapper div and the ids to the headings and lists that you already have.
The next thing we need to do once we have the HTML for our collapsible menu set up is to style it. To do this simply add the following code either into your external stylesheet attached to the head of your page or put it between <style type="text/css"> and </style> in the head of the page.
Should you decide to use a different heading tag for your menu then simply change the h5 reference to whatever heading tag you used. You can also change the width of the whole thing and/or the colour and font weight for the heading without affecting the menu operation but the rest of the styles must be as shown for the menus to display correctly. I haven't styled the <a> tags within my menu since how those are styled for their appearance does not affect the operation of the menu.
Now all we need to do is to link that script into our page by adding the following code immediately before the </body> tag.
This article written by Stephen Chapman, Felgall Pty Ltd.