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();