Accordion component
jQuery UI accordion widget with optionsDefault functionality
Click headers to expand/collapse content that is broken into logical sections, much like tabs. The underlying HTML markup is a series of headers (span tags) and content divs so the content is usable without JavaScript.
Fill space
To fill the vertical space allocated by its container, set the heightStyle option to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.
Animation
Control animation easing and duration using animate option. Accepts true or false values; number - duration in milliseconds; string - name of easing; object - containing easing and duration properties.
Collapse content
By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true in widget configuration. Click on the currently open section to collapse its content pane.
Open on hover
By default, accordion uses click event to collapse/expand content. It can be changed using event option, that is responsible for activating the associated card. Multiple events can be specified, separated by a space.
Sortable panels
Accordion widget supports sortable functionality for panels re-ordering. To use, specify dragging handle and vertical axis in sortable accordion configuration and add accordion refresh when sorting is stopped.
Menu component
jQuery UI menu widget with optionsDisabled items
Using .ui-state-disabled class
Left menu item icons
Dropdown icons in left position
Highlighted header
Highlight header using .highlight class
Disabled menu
Disable menu using disabled option
Element positions
Components and their positions
Menu header icons
Display left/right positioned icons
Basic configuration
Basic menu with default functionality
Multiple levels
Example of multi level sub menus
Default header
Basic header styling of label sections