search

JeremyEnglert / JointsWP-Documentation

This handles the documentation content for JointsWP.com.
http://jointswp.com
12 stars 17 forks source link

Tabs don't toggle back and forth #11

Open d-wren opened 7 years ago

d-wren commented 7 years ago

I used foundation tabs in my JointsWP theme and they just don't work. The tab content stays on the first one and won't switch.

I just copied the basic code from Zurb's docs.

<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>one</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>two</p>
    <img class="thumbnail" src="http://placekitten.com/150/150">
  </div>
  <div class="tabs-panel" id="panel3">
    <p>three</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel4">
    <p>four</p>
    <img class="thumbnail" src="http://placekitten.com/150/150">
  </div>
  <div class="tabs-panel" id="panel5">
    <p>five</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel6">
    <p>six</p>
    <img class="thumbnail" src="http://placekitten.com/150/150">
  </div>
</div>
sdatic commented 7 years ago

This is the structure used on the demo page, http://jointswp.com/demo/ and works in my jointswp sass version. 

<h2>Tabs</h2>
<ul id="example-tabs" class="tabs" data-tabs="">
<li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div id="panel1" class="tabs-panel is-active">
<p>Some content.</p>
</div>
<div id="panel2" class="tabs-panel">
<p>Other tab</p>
</div>
</div>