lightweight flexible vertical accordion jquery plugin
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A vertical accordion by greatestview.

Turnes a simple ul-list or similar into a vertical accordion. Almost completely DOM independent, perfect for complex CMS markup. Multiple nesting possible.

This plugin is easy to handle, very lightweight and CSS independent. Every kind of styling remains in your control with your CSS files. If you need additional styling, this script provides a class, which is applied to expanded elements: gv-accordion-active. With this class you can handle additional animations of arrows or background replacements. Furthermore you can attach this class to any list items, which should appear expanded on first load.

For making list items collapsed via CSS on first load, I recommend implementing a javascript function to attach a body class like .js-enabled. That way negative effects on SEO can be prevented.

You can apply it to very different kinds of HTML structure. However not every possible structure can be tested, so this is what a preferred way may look like:

ul/ol (where the script is attached)
|- li
|-- hx title_class
|-- div body_class
|-- ul/ol (optional nested child accordion, attach the script here a second time)
|---- li
|------ hy children_title_class
|------ div children_body_class

Please note

  1. Use unique body selectors when using nested accordions to prevent interferences!
  2. title_selector and body_selector must be siblings on the same DOM level

Tested with: IE8+, Chrome, Firefox, Opera, jQuery 1.7.2

Todo: collapse all function