Submit FAQs Awards Usage Terms Contact
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
Other Sections
Compatibility
Bookmark online:

Accordion Menu script (v1.3)

Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look. Lets see two Accordion Menu examples to get you on your way.

Important: Both of the examples below rely on the same two .js files of Accordion Content script, so make sure they are downloaded already:

  1. ddaccordion.js
  2. jquery-1.2.2.pack.js

Bullet List Accordion Menu

In this menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract. A CSS class gets dynamically added to a header when it's expanded to style the expanded header:

Full HTML Source:

Select All

The menu uses three 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.

Bullet List Accordion Menu with nested levels

The same menu as above, but this one illustrates how you would add a collapsible sub level. The key is simply to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level would be a new instance.

Full HTML Source:

Select All

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


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.

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 clicked on, 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