As a developer I have to often take "coding challenges". A recent one had a static picture of a menu that looked like an accordion menu. Being a coding challenge I didn't want to use some giant jQuery package, nor did I want to build a function to toggle each menu. The solution was obviously my own custom JavaScript class that modified the Document Object Model (DOM) based on simple naming conventions.

The JavaScript class will scan the DOM for any div tags with a class attribute value of "accordion_menu". Once an accordion_menu div is identified the AccordionManger class will turn every odd child div into an clickable title that will toggle the display of the proceeding even div tag.

Here is the source that made the above menu.

I have tested this in Opera, Firefox, IE, and Chrome. It seems to work fine in all of them, even older versions. However use at your own risk, it is just an example after all. If you would like to use or expand on this little class, download the example package.