Please note: This page provides documentation for an old version of Kwicks. If possible, you should check out the latest version instead.

Kwicks for jQuery (v1.5.1)

Welcome to the Kwicks for jQuery home page. Kwicks for jQuery is a plugin providing sexy sliding panels with an emphasis on navigational interaction. Kwicks was originally a port of a MooTools effect (of the same name), but has since evolved into a highly configurable and versatile UI component. Please check out the examples to see it in action.

Getting Started

Dependencies

Source

Kwicks is available on GitHub. You can download Kwicks 1.5.1 (with examples) here [zip], or browse the source here.

The Code

Kwicks follows the usual jQuery plugin convention:

$(element).kwicks(opts);

View the configuration options below, and be sure to check out the examples to see them in use.

Examples

Configuration

The following options are specified when instantiating a new Kwicks instance:

max|min:(Required)

The width or height (in pixels) of a fully expanded|collapsed panel. If isVertical is true, then the sized dimension refers to the height - otherwise it is the width.

Note that you must specify max OR min, but not both.

isVertical:(Default: false)

Indicates whether or not the panels should be arranged vertically.

sticky:(Default: false)

One panel will always be expanded if true.

defaultKwick:(Default: 0)

Index of the initially expanded panel (if and only if sticky is true).

event:(Default: 'mouseover')

The event that triggers the expand effect. Other likely candidates are 'click' and 'dblclick'.

duration:(Default: 200)

The number of milliseconds required for each animation to complete.

easing:(Default: none)

A custom easing function for the animation (requires easing plugin).

spacing:(Default: 0)

The width (in pixels) separating each panel.

Special Considerations

Include stylsheets first: Kwicks relies on values set in your CSS, so be sure any relevant stylesheets are included before your JavaScript references.

Important styling information: Please note that in order to provide the smoothest possible animations, the following style changes are made by the script:

  • All panels are converted to absolute positioning.
  • Margins on the panels are stripped, but the spacing option is respected through absolute positioning.
  • The height of the containing ul tag is set to match the height of the panels.
  • The width of the containing ul tag is set to match the width and spacing of all the panel elements combined.
  • Even though the panels' margins are stripped, in order for them to look correct in non-JS enabled browsers, they should still be given margins that correspond to the spacing option (if any). I strongly recommend that you look at the commented css file contained in the Kwicks example.

Lastly, note that the "active" (expanded/expanding) panel is given an extra class of "active". This allows for more flexible styling based on the state of the panel.