Swap Demo

Basic

Handle

Content

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

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

Grouped

Handle 1

Content 1

Handle 2

Content 2

<h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>
<div class="swap_target_1">Content 1</div>

<h2 class="swap" data-swap-target=".toggle_target_2" data-swap-group="swap_group">Handle 2</h2>
<div class="swap_target_2">Content 2</div>

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

Grouped (no collapse)

Handle 1

Content 1

Handle 2

Content 2

<h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>
<div class="swap_target_1">Content 1</div>

<h2 class="swap" data-swap-target=".swap_target_2" data-swap-group="swap_group" data-swap-active="true">Handle 2</h2>
<div class="swap_target_2">Content 2</div>

$(".swap").swap({
	collapse: false
});

Max Width

Handle

Content

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

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

Linked Handles

Handle 1 - Group 1

Content

Handle 2 - Group 1

Handle 1 - Group 2

Content 2

Handle 2 - Group 2

<h2 class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 1 - Group 1</h2>
<div class="swap_target_1">Content</div>
<span class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 2 - Group 1</span>

<h2 class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 1 - Group 2</h2>
<div class="swap_target_2">Content 2</div>
<span class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 2 - Group 2</span>

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