Foundation 5.3.1 Tabs Not Working With Meteor

Question

I'm using Meteor v0.8.2 and the zf5 smart package (https://atmospherejs.com/package/zf5) from Atmosphere (recently updated to Foundation v5.3.1). I'm attempting to use vertical tabs, but I can't get the content for any of the tabs to show up except the first active vertical tab.

I've tried manually including Foundation JS/CSS files from the smart package on index.html and layout.html, switching to the smart package Foundation5-sass, double checking the JS version, adding Meteor's jQuery smart package, switching the order of the add_files method in package.js (https://github.com/juliancwirko/meteor-zf5/blob/master/package.js), and using the dl and dd tags instead of the ul li tags from the Docs. I also tried using $(document).foundation('reflow'); as suggested in the README for the zf5 smart package.

I can't tell if this is a problem with the smart package, a problem with Foundation, or if I've overlooked something really obvious. The following is the HTML I'm using on the home page:

<!-- Chapter Tabs -->
<ul class="tabs vertical" data-tab>
   <li class="tab-title active"><a href="#intro">Introduction</a></li>
   <li class="tab-title"><a href="#chapter0">Chapter 0</a></li>
   <li class="tab-title"><a href="#chapter1">Chapter 1</a></li>
   <li class="tab-title"><a href="#chapter2">Chapter 2</a></li>
   <li class="tab-title"><a href="#chapter3">Chapter 3</a></li>
   <li class="tab-title"><a href="#chapter4">Chapter 4</a></li>
   <li class="tab-title"><a href="#chapter5">Chapter 5</a></li>
</ul>
<!-- Chapter Content -->
<div class="tabs-content vertical">
   <div class="content active" id="intro">
      <p>Introduction goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter0">
      <p>Chapter 0 goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter1">
      <p>Chapter 1 goes here.</p>
   </div><!-- end #chapter1 -->
   <div class="content" id="chapter2">
      <p>Chapter 2 goes here.</p>
   </div><!-- end #chapter2 -->
   <div class="content" id="chapter3">
      <p>Chapter 3 goes here.</p>
   </div><!-- end #chapter3 -->
   <div class="content" id="chapter4">
      <p>Chapter 4 goes here.</p>
   </div><!-- end #chapter4 -->
   <div class="content" id="chapter5">
      <p>Chapter 5 goes here.</p>
   </div><!-- end #chapter5 -->
</div><!-- end .tabs-content .vertical -->

Here is layout.html:

<template name="layout">
   <div class="container">
    {{> header}}
      <div class="main">
       {{> yield}}
      </div><!-- end .main -->
    {{> footer}}
   </div><!-- end .container -->

 <script>
    $(document).foundation('reflow');
 </script>
</template>

The project's not on GitHub yet, but if there's more info needed, I'll update right away.

Answer 1

Try to put your tabs in a template like myTemplateWithTabs render it (render it by iron router yields or by {{> myTemplateWithTabs}} ) and run :

Template.myTemplateWithTabs.rendered = function () {
    $(document).foundation('reflow');
}

and not in the main template like you did by script tags, it will not work like that