Menu icon Foundation
Tabs not rendering

<html>
 <body>
  
    <div  class="contain-to-grid">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#"><%= @message %></a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
   
    <!-- Right Nav Section -->
    <ul class="full-width web right">
     <li class="has-form">
         <div class="row collapse" >
       <%= form_tag("/salutation/hello", method: "post") do %>
        <div class="large-8 small-9 columns">
            <%= text_field_tag(:find_stuff) %>
         </div>
         <div class="large-4 small-3 columns">
              <%= submit_tag "Search", class: "alert button expand"%>
         </div>
            
     <% end %>
     
      <li>
        <a href="#">Login|Register</a>
      </li>
         </div>
     </li>
    </ul>
   </ul>
    
    <!-- Left Nav Section -->
   
  </section>
</nav>
    </div>
    <div class="row">
     <%= @test %>
    </div> 
 
 <dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>
  <div class="content" id="panel2-3">
    <p>Third panel content goes here...</p>
  </div>
  <div class="content" id="panel2-4">
    <p>Fourth panel content goes here...</p>
  </div>
</div>
 </body>
</html>

---SCSS file here as zurb docs recommend in app/assets/stylesheets/foundations_and_overrides.scss ----
--only changes are here --

@import 'foundation';
@import "foundation/components/tabs";

         

This is a simple problem I get tabs without any content, I am trying to have a tabbed menu to get information. The
tabs are shown but with no action. Are there any files that I am missing here to import in the stylesheets directory
Maybe missing some functions, and mixins, but the sequence is that of docs, Any input is appreciated,

Testing

tabs

<html>
 <body>
  
    <div  class="contain-to-grid">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#"><%= @message %></a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
   
    <!-- Right Nav Section -->
    <ul class="full-width web right">
     <li class="has-form">
         <div class="row collapse" >
       <%= form_tag("/salutation/hello", method: "post") do %>
        <div class="large-8 small-9 columns">
            <%= text_field_tag(:find_stuff) %>
         </div>
         <div class="large-4 small-3 columns">
              <%= submit_tag "Search", class: "alert button expand"%>
         </div>
            
     <% end %>
     
      <li>
        <a href="#">Login|Register</a>
      </li>
         </div>
     </li>
    </ul>
   </ul>
    
    <!-- Left Nav Section -->
   
  </section>
</nav>
    </div>
    <div class="row">
     <%= @test %>
    </div> 
 
 <dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>
  <div class="content" id="panel2-3">
    <p>Third panel content goes here...</p>
  </div>
  <div class="content" id="panel2-4">
    <p>Fourth panel content goes here...</p>
  </div>
</div>
 </body>
</html>

---SCSS file here as zurb docs recommend in app/assets/stylesheets/foundations_and_overrides.scss ----
--only changes are here --

@import 'foundation';
@import "foundation/components/tabs";

         

This is a simple problem I get tabs without any content, I am trying to have a tabbed menu to get information. The
tabs are shown but with no action. Are there any files that I am missing here to import in the stylesheets directory
Maybe missing some functions, and mixins, but the sequence is that of docs, Any input is appreciated,

Testing
Adrian Durran over 5 years ago

Tabs are a JS component so if you are not able to click and move through each tab I would suggest that the issue is there?

Ravi K over 5 years ago

Yes, They do not scroll through each tab, I tried the application.js, it has the following:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(function(){ $(document).foundation(); });

I was wondering if it was the jquery version, or some other issue!

thanks,

R