Menu icon Foundation
Foundation Tabs not working

I have copied the code direct from the website, the first example:

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2a">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3a">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4a">Tab 4</a></li>
</ul>
<div class="tabs-content vertical">
  <div class="content active" id="panel1a">
    <p>Panel 1 content goes here.</p>
  </div>
  <div class="content" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
  <div class="content" id="panel3a">
    <p>Panel 3 content goes here.</p>
  </div>
  <div class="content" id="panel4a">
    <p>Panel 4 content goes here.</p>
  </div>
</div>

         

No styles get applied, no tabs do anything on click.
Foundation is included in the page as I'm using it for everything else, I have:

         <script>
            $(document).foundation();
        </script>

And still doesnt work, all plugins deletings, cache emptied etc, anyone know whats up?

Foundationtabs

I have copied the code direct from the website, the first example:

<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2a">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3a">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4a">Tab 4</a></li>
</ul>
<div class="tabs-content vertical">
  <div class="content active" id="panel1a">
    <p>Panel 1 content goes here.</p>
  </div>
  <div class="content" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
  <div class="content" id="panel3a">
    <p>Panel 3 content goes here.</p>
  </div>
  <div class="content" id="panel4a">
    <p>Panel 4 content goes here.</p>
  </div>
</div>

         

No styles get applied, no tabs do anything on click.
Foundation is included in the page as I'm using it for everything else, I have:

         <script>
            $(document).foundation();
        </script>

And still doesnt work, all plugins deletings, cache emptied etc, anyone know whats up?

This post has been closed. No new replies can be added.

John Madhavan-Reese over 5 years ago

I was having the exact same issue.
I was on Foundation 5.2.2, and I noticed that the docs had some CSS that my page was missing.
I upgraded to Foundation 5.2.3 (both CSS and JS), and my tabs work now.

ADGenove about 5 years ago

I've Change the ul tag to dl and li tag to dd. Hope this helps.

Mikhail Svirkin over 4 years ago

Hi!

I have the same issue with tabs.
This is my mark-up for them (taken from documentation):

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

I also attach Foundation library in the end of the document :

<script>
            $(document).foundation();
        </script>

I use Foundation 5.5.1, Essential.
Shall I use extra javascript to make tabs work?

Thank you!

Rafi Benkual over 4 years ago

You need the scripts for JS to work:

   <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Paul Walksalong over 4 years ago

Now my tabs are working, but not always working on the first load. Many times I'll have to do a hard reload on the page for the tabs to start to work. This is only on production (Heroku). This is the case for Orbit as well. The slider will break down and it takes a reload to have it built properly.

UPDATE This turned out to be a Turbolinks issue. I had to remove the gem from my Rails app to get Foundation working properly.