DOMscripting powered Panel Bar

This panel bar was developed as a proof of concept and can be used in non-commercial products free of charge.

You can download the zip file with this document, the script, images and the css example.

Short usage notes:

• You can alter the navigation ID, the class of the currently open section, the class to be added to the list with the id and the elements to be turned into triggers to expand and collapse the sections as parameters in the script. Presets are 'nav' for the ID, 'panel' for the dynamic class, 'open' for the class and 'h6' as the trigger elements.
• The script adds the 'panel' class to the list to allow you to style the menu differently for non-JavaScript and JavaScript enabled users.
• The section that does already have the 'open' class on the list item will not be collapsed on page load.

Enjoy, and report any comments on the blog.