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