Glossy Accordion Menu

In this example, the menu headers are A tags, with each sub menu being DIV tags that expand/ contract. The use of DIV tags for the sub menus is to facilitate content other than UL lists. An absolutely positioned icon image gets dynamically added to each header that changes depending on the header state. The headers are toggled via "click" of the mouse, and all headers can be collapsed. The previous expanded header (if any) is closed before expanding the current.

Required external file (right click, and select "Save As"):

  1. ddaccordion.js

Entire HTML Source code:

Select All

The menu uses four images for the purpose of styling the menu (download by right clicking, and select "Save As"):

See the frontpage of Accordion Content script for a full explanation of each setting inside the script.

Glossy Accordion Menu with responsive headers

Same menu as above, except this one also uses the oninit() and onopenclose() event handlers to run custom code when the menu has finished loading, plus when a header is expanded/contracted due to user initiated action per the config.revealtype setting, respectively. See Taking advantage of the oninit() and onopenclose() event handlers for details.

Entire HTML Source code:

Select All

The menu uses four images for the purpose of styling the menu (download by right clicking, and select "Save As"):

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post