Menu icon Foundation
Can't create 3 tabs

Hi

I can't create 3 tabs, tabs 2nd and 3nd getting error. I have change ID tabs but not work. So it's possible to create 3 a tabs? sorry if my english is bad


Thank you

tabs

Hi

I can't create 3 tabs, tabs 2nd and 3nd getting error. I have change ID tabs but not work. So it's possible to create 3 a tabs? sorry if my english is bad


Thank you

Will Moody almost 3 years ago

Hi Kholis

 

Could you post your code here so people can offer some help, are you using F5 of F6?

 

Will

kholis Muhaimin almost 3 years ago

I just copy this script 3 times,

#1

<ul class="tabs" data-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>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>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.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>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.</p>
  </div>
</div>


Thank you

Will Moody almost 3 years ago

Hi Kholis

Below is the html code for the tabs

<div class="row">
  <div class="medium-6 medium-centered columns">
    <ul class="tabs" data-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>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.</p>
      </div>
      <div class="tabs-panel" id="panel2">
        <p>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.</p>
      </div>
    </div>
        <div class="tabs-content" data-tabs-content="example-tabs">
      <div class="tabs-panel" id="panel3">
        <p> Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. 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.</p>
      </div>
      <div class="tabs-panel" id="panel4">
        <p>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.</p>
      </div>
    </div>
        <div class="tabs-content" data-tabs-content="example-tabs">
      <div class="tabs-panel" id="panel5">
        <p>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.</p>
      </div>
      <div class="tabs-panel" id="panel6">
        <p> Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. 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.</p>
      </div>
    </div>
  </div>
</div>

 

This works fine, you can see it at this codepen http://codepen.io/FatBuddha/pen/BQOWNj

You will also need to add 

$(document).foundation();

to your apps.js

 

Will