title: Foundation Zurb Tabs not working
body: <p>I am not sure as to why this is complex.</p>
  
  <p>1> Load the foundation.css</p>
  
  <p>2> Load the foundation.min.js</p>
  
  <p>3> Add the following code for Foundation Tabs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="tabs" data-tabs id="example-tabs"&gt;
    &lt;li class="tabs-title is-active"&gt;&lt;a href="#panel1" aria-selected="true"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="tabs-title"&gt;&lt;a href="#panel2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tabs-content" data-tabs-content="example-tabs"&gt;
    &lt;div class="tabs-panel is-active" id="panel1"&gt;
      &lt;p&gt;Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tabs-panel" id="panel2"&gt;
      &lt;p&gt;Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>4> Initialize foundation and tabs as:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).foundation();
  
  $(document).foundation('tab', 'reflow');</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why doesn't this work?</p>