Limitless - Responsive Web Application Kit by Eugene Kopyov

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 (span tags) 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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

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.

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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

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.

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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

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.

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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

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 panel. 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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

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.

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.

Section 2

Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.

Section 3

3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.

Menu component jQuery UI menu widget with options

Basic configuration

Basic menu with default functionality

Multiple levels

Example of multi level sub menus

Default header

Basic header styling of label sections

Disabled 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