formstone/src/docs/swap.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<style>
  .demo_content .toggle { cursor: pointer; display: none; margin: 10px 0; }
  .demo_content .toggle.fs-swap-enabled { display: block; }
  .toggle,
  .no-touch .toggle:hover { background: #B0BEC5; }
  .toggle.fs-swap-active,
  .no-touch .toggle.fs-swap-active:hover { background: #00bcd4; }

  .toggle_target { background: #00bcd4; border-radius: 3px; color: #fff; height: 75px; line-height: 75px; margin: 10px 0; text-align: center; width: 100%; }
  .toggle_target.fs-swap-enabled.fs-swap-target { display: none; }
  .toggle_target.fs-swap-enabled.fs-swap-active { display: block; }
</style>

<div class="demo_container">
  <div class="demo_example">
    <div class="button toggle js-swap" data-swap-target=".toggle_target_0">Handle</div>
    <div class="toggle_target toggle_target_0">Content</div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target&quot;&gt;Handle&lt;/h2&gt;
&lt;div class=&quot;swap_target&quot;&gt;Content&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".swap").swap();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Grouped</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="button toggle js-swap" data-swap-target=".toggle_target_1" data-swap-group="toggle_group_1">Handle 1</div>
    <div class="toggle_target toggle_target_1">Content 1</div>

    <div class="button toggle js-swap" data-swap-target=".toggle_target_2" data-swap-group="toggle_group_1">Handle 2</div>
    <div class="toggle_target toggle_target_2">Content 2</div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target_1&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 1&lt;/h2&gt;
&lt;div class=&quot;swap_target_1&quot;&gt;Content 1&lt;/div&gt;

&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.toggle_target_2&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 2&lt;/h2&gt;
&lt;div class=&quot;swap_target_2&quot;&gt;Content 2&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".swap").swap();</code></pre>
  </div>
</div>

<h4>Grouped (no collapse)</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="button toggle js-swap" data-swap-options='{"collapse":false}' data-swap-target=".toggle_target_3" data-swap-group="toggle_group_2">Handle 1</div>
    <div class="toggle_target toggle_target_3">Content 1</div>

    <div class="button toggle js-swap" data-swap-options='{"collapse":false}' data-swap-target=".toggle_target_4" data-swap-group="toggle_group_2" data-swap-active="true">Handle 2</div>
    <div class="toggle_target toggle_target_4">Content 2</div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target_1&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 1&lt;/h2&gt;
&lt;div class=&quot;swap_target_1&quot;&gt;Content 1&lt;/div&gt;

&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target_2&quot; data-swap-group=&quot;swap_group&quot; data-swap-active=&quot;true&quot;&gt;Handle 2&lt;/h2&gt;
&lt;div class=&quot;swap_target_2&quot;&gt;Content 2&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".swap").swap({
  collapse: false
});</code></pre>
  </div>
</div>

<h4>Max Width</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="button toggle js-swap" data-swap-options='{"maxWidth":"740px"}' data-swap-target=".toggle_target_5">Handle</div>
    <div class="toggle_target toggle_target_5">Content</div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target&quot;&gt;Handle&lt;/h2&gt;
&lt;div class=&quot;swap_target&quot;&gt;Content&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".swap").swap({
  maxWidth: "740px"
});</code></pre>
  </div>
</div>

<h4>Linked Handles</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="button toggle js-swap" data-swap-target=".toggle_target_6" data-swap-linked="toggle_linked" data-swap-group="toggle_group_3">Handle 1 - Group 1</div>
    <div class="toggle_target toggle_target_6">Content</div>
    <div class="button toggle js-swap" data-swap-target=".toggle_target_6" data-swap-linked="toggle_linked" data-swap-group="toggle_group_3">Handle 2 - Group 1</div>

    <div class="button toggle js-swap" data-swap-target=".toggle_target_7" data-swap-linked="toggle_linked_2" data-swap-group="toggle_group_3">Handle 1 - Group 2</div>
    <div class="toggle_target toggle_target_7">Content 2</div>
    <div class="button toggle js-swap" data-swap-target=".toggle_target_7" data-swap-linked="toggle_linked_2" data-swap-group="toggle_group_3">Handle 2 - Group 2</div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target_1&quot; data-swap-linked=&quot;swap_linked_1&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 1 - Group 1&lt;/h2&gt;
&lt;div class=&quot;swap_target_1&quot;&gt;Content&lt;/div&gt;
&lt;span class=&quot;swap&quot; data-swap-target=&quot;.swap_target_1&quot; data-swap-linked=&quot;swap_linked_1&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 2 - Group 1&lt;/span&gt;

&lt;h2 class=&quot;swap&quot; data-swap-target=&quot;.swap_target_2&quot; data-swap-linked=&quot;swap_linked_2&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 1 - Group 2&lt;/h2&gt;
&lt;div class=&quot;swap_target_2&quot;&gt;Content 2&lt;/div&gt;
&lt;span class=&quot;swap&quot; data-swap-target=&quot;.swap_target_2&quot; data-swap-linked=&quot;swap_linked_2&quot; data-swap-group=&quot;swap_group&quot;&gt;Handle 2 - Group 2&lt;/span&gt;</code></pre>
    <pre><code class="language-javascript">$(".swap").swap();</code></pre>
  </div>
</div>