tabs not working

Question

I am using Zurb Foundation mark up tabs. When the tabs render it initially stacks all the tabs content instead of putting the content in their individual tabs? I've done this else where on the site and though it was a while ago it works. what am i doing wrong here?

Here is the page, its a little rough design wise but i am trying to get everything working. http://niwot.colorado.edu/index.php/location/3rd_order_location/glv_3rd Here is my simplified code-

  <dl class="tabs contained">
         {exp:channel:entries channel="nwt_3rd_order_location_group"}
           {exp:playa:children field="discipline_3rd_order" orderby="title" sort="asc"}
    <dd {if count == '1'}class="active"{/if}><a href="#simpleContained{url_title}">{discipline_short_name}</a></dd>
            {/exp:playa:children}
           {/exp:channel:entries}    
  </dl>
  <ul class="tabs-content contained">
       {exp:channel:entries channel="nwt_3rd_order_location_group"}
         {exp:playa:children field="discipline_3rd_order"}
    <li class="active" id="simpleContained{url_title}Tab">

               {discipline_description}
    </li>
          {/exp:playa:children}
       {/exp:channel:entries}    
  </ul>

Answer 1

This is actually a HTML/CSS issue.

You're forgetting that just the first tab content should have the class active.

The tabs have a conditional, {if count == '1'}class="active"{/if}, but the contents doesn't.

---

You should use the var_prefix parameter on playa to avoid conflicts.