Unobtrusive Collapsible Menu

1. Introduction

This is a rewrite of my collapsible menu script that uses modern unobtrusive techniques to attach the JavaScript to the menus making for more user friendly HTML that will still work as a menu even with javaScript and stylesheets disabled.

This script allows you to have multiple collapsible menus on your page just as the earlier version did with each menu being able to be expanded and contracted independently. The difference from the earlier version is that with this version each menu is defined as a heading followed by a list in the HTML and there is only one class reference to add to the HTML to style the whole thing, and one id per menu to give the JavaScript something to interact with. The only actual JavaScript is added as an external script linked into the page immediately prior to the closing body tag.

The way that this script is coded should make it fairly easy to add the functionality to existing menus within your page.

An example of a collapsible menu appears at the top right of the content section of this page. The menu contains links to the other pages on setting up a collapsible menu as well as two other menu types that can also be used to save screen space.

If you want to add collapsible menus like this to your page then the first thing you need to do is to create the HTML. If you prefer one of the alternative menu styles then simply select the appropriate option from the collapsible menu above to go straight to the required page.