Swap

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<h2 class="swap" data-swap-target=".swap_target">Handle</h2>
<div class="swap_target">Content</div>

$(".swap").swap();

Using Swap

Main

swap.js

Dependencies

jQuery
core.js
mediaquery.js

Basic

Swap toggles classes on groups of elements based on configuration options and user interaction. It is up to the developer to utilize the classes.

$(".target").swap();

<div class="target" data-swap-target=".toggle">Toggle</div>
<div class="toggle">Target</div>

Groups

Swaps can be grouped together for a simple accordions or tabs using the data-swap-group attribute.

<h4>Grouped</h4>
<div class="target" data-swap-target=".toggle_1" data-swap-group="group_1">Toggle - 1</div>
<div class="target" data-swap-target=".toggle_2" data-swap-group="group_1">Toggle - 2</div>

<div class="toggle_1">Target - 1</div>
<div class="toggle_2">Target - 2</div>

Linked

Swaps can be linked together for multiple handles using the data-swap-linked attribute.

<h4>Grouped</h4>
<div class="target" data-swap-target=".toggle_1" data-swap-linked="linked_1">Handle - 1</div>

<div class="toggle_1">Target - 1</div>

<div class="target" data-swap-target=".toggle_1" data-swap-linked="linked_1">Handle - 2</div>

Max Width

Swaps will auto-enable and disable themselves if the maxWidth property is set.

$(".target").swap({
  maxWidth: "740px"
});

<div class="target" data-swap-target=".toggle">Toggle</div>
<div class="toggle">Target</div>

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-swap-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

activate

Activate instance.

$(".target").swap("activate");

deactivate

Deactivates instance.

$(".target").swap("deactivate");

defaults

Extends plugin default settings; effects instances created hereafter.

$.swap("defaults", { ... });

Parameters

destroy

Removes plugin instance.

$(".target").swap("destroy");

disable

Disables instance.

$(".target").swap("disable");

enable

Enables instance.

$(".target").swap("enable");

CSS