Kwicks for jQuery (v2.0.0)

The following options may be specified when instantiating a new Kwicks instance:

size:(Required)

The width or height (in pixels) of a panel in its "default" state (neither expanded nor collapsed). If isVertical is true, then size refers to the height of the panel, otherwise it refers to the width. This value is used along with spacing to calculate the overall size of the Kwicks container.

maxSize|minSize:(Required)

The width or height (in pixels) of a fully expanded|collapsed panel.

Note that you must specify maxSize OR minSize, but not both.

spacing:(Default: 5)

The distance (in pixels) separating each panel.

duration:(Default: 500)

The number of milliseconds for the animation to run.

isVertical:(Default: false)

Indicates whether or not the panels should be arranged vertically.

easing:(Default: none)

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

behavior:(Default: none)

Indicates if/what out-of-the-box behavior should be enabled. So far I've only included one possible value here: "menu" (used in several of the demos). By far the most common request I received from the previous version was the ability to "peak" on hover and "select" on click, so this is what the "menu" behavior will set up for you. If other popular use cases arise, I'll consider adding them here.

Kwicks provides four API methods that may be used for programmatic control and inspection of the plugin.

expand

Expands the panel with the specified index (use -1 to expand none).

$(container).kwicks('expand', index);

Alternatively, the expand method may also be invoked directly on a panel (rather than the container). For example,

$(container).children().eq(index).kwicks('expand');

...performs the same action as the previous example

expanded

Returns the index of the currently expanded panel (or -1 if no panels are expanded).

var index = $(container).kwicks('expanded');

select

Selects the panel with the specified index (use -1 to select none). Please note that most use cases will not require the use of select. Calling select has the same effect as calling expand, except that select is stateful. That is, once a panel has been selected, it will maintain that state even after other panels have been expanded. When $(element).kwicks('expand', -1); is invoked, the currently selected panel will be expanded, if it exists.

$(container).kwicks('select', index);

Just like expand, select may also be invoked directly on a panel:

$(container).children().eq(index).kwicks('select');

Note: if you want a panel to be automatically selected on initialization, simply add a kwicks-selected class to its markup.

selected

Returns the index of the currently selected panel (or -1 if no panels are selected).

var index = $(container).kwicks('selected');

All Kwicks interactions trigger events that can be used to react to (or cancel) behavior.

expand.kwicks

Fired before a panel is expanded.

$(container).on('expand.kwicks', function(e, data) {
    // panel index
    console.log(data.index);

    // e.target is the panel, unless we're expanding "none"
    if (data.index === -1) {
        // e.target is the container node
    } else {
        // e.target is the panel to be expanded
    }

    // prevent the panel from expanding
    e.preventDefault();
});

select.kwicks

Same behavior as expand.kwicks, except that it is (obviously) triggered before a panel is selected:

$(container).on('select.kwicks', function(e, data) {
    // panel index
    console.log(data.index);

    // e.target is the panel, unless we're selecting "none"
    if (data.index === -1) {
        // e.target is the container node
    } else {
        // e.target is the panel to be selected
    }

    // prevent the panel from being selected
    e.preventDefault();
});