formstone/src/docs/tabs.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<style>
  .tabs { overflow: hidden; }
</style>

<div class="demo_container">
  <div class="demo_example">
    <div role="tablist">
      <nav class="tabs">
        <a href="#tab-1-1" class="tab js-tabs" data-tabs-group="tab-1">One</a>
        <a href="#tab-1-2" class="tab js-tabs" data-tabs-group="tab-1" data-tabs-active="true">Two</a>
        <a href="#tab-1-3" class="tab js-tabs" data-tabs-group="tab-1">Three</a>
      </nav>
      <div class="tab_content" id="tab-1-1">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
      <div class="tab_content" id="tab-1-2">
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
      </div>
      <div class="tab_content" id="tab-1-3">
        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;tabs_container&quot;&gt;
&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".tabs").tabs();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Mobile Max Width</h4>
<div class="demo_container">
  <div class="demo_example">
    <div role="tablist">
      <nav class="tabs">
        <a href="#tab-2-1" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>One</a>
        <a href="#tab-2-2" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>Two</a>
        <a href="#tab-2-3" class="tab js-tabs" data-tabs-group="tab-2" data-tabs-options='{"mobileMaxWidth":"500px"}'>Three</a>
      </nav>
      <div class="tab_content" id="tab-2-1">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
      <div class="tab_content" id="tab-2-2">
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
      </div>
      <div class="tab_content" id="tab-2-3">
        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;tabs_container&quot;&gt;
&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".tabs").tabs({
  mobileMaxWidth: 500
});</code></pre>
  </div>
</div>

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <div role="tablist">
      <nav class="tabs">
        <a href="#tab-3-1" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>One</a>
        <a href="#tab-3-2" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>Two</a>
        <a href="#tab-3-3" class="tab js-tabs" data-tabs-group="tab-3" data-tabs-options='{"theme":""}'>Three</a>
      </nav>
      <div class="tab_content" id="tab-3-1">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
      <div class="tab_content" id="tab-3-2">
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
      </div>
      <div class="tab_content" id="tab-3-3">
        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;tabs_container&quot;&gt;
&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;
&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;
&Tab;...
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".tabs").tabs({
  theme: ""
});</code></pre>
  </div>
</div>