Accordion component
jQuery UI accordion widget with options
Default 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 (spantags) and content divs so the content is usable without JavaScript.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Fill space

To fill the vertical space allocated by its container, set the heightStyleoption to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Animation

Control animation easing and duration using animateoption. Accepts trueor falsevalues; number- duration in milliseconds; string- name of easing; object- containing easingand durationproperties.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Collapse content

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsibleoption to truein widget configuration. Click on the currently open section to collapse its content pane.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Open on hover

By default, accordion uses clickevent to collapse/expand content. It can be changed using eventoption, that is responsible for activating the associated card. Multiple events can be specified, separated by a space.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Sortable panels

Accordion widget supports sortablefunctionality for panels re-ordering. To use, specify dragging handleand vertical axisin sortable accordion configuration and add accordion refreshwhen sorting is stopped.

Section 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Menu component
jQuery UI menu widget with options
Basic configuration

Basic menu with default functionality

Default header

Basic header styling of label sections

Disabled items

Using .ui-state-disabledclass

Left menu item icons

Dropdown icons in leftposition

Highlighted header

Highlight header using .highlightclass

Disabled menu

Disable menu using disabledoption

Menu header icons

Display left/right positioned icons

Tabs component
jQuery UI tabs widget with options
Basic tabs
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
Open on hover
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
Tabs with icons
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
Collapsible tabs
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
Sortable tabs
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
Badges
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.