Nested html tabs and playa fields please help

Question

I now want to create a second set of pill tabs based on a playa list called up within the first channel entry (called "nwt_2cd_order_location") I am using Zurb Foundation's mark up for responsive design and it worked on flat pages.

The child in a playa list would be (called "3rd_order_under") and from that list i want to add content from that child. This all works pretty good until the user chooses a different selection under the first set of tabs (nwt_2cd_order_location). It does not update the second set correctly (3rd_order_under).

If thats not enough, once that works i would like to add another playa list (no tabs this time fortunately) in the content derived from a playa list inside (3rd_order_under) called {4th_order_under_3rd_order}. Can you call up a playa list three tier deep?

So if any one here has any suggestions I sure would appreciate it.

Thanks Eric

The page

http://niwot.colorado.edu/index.php/location

My simplified code:

<!-- PILL TABS -->

<div class="row">

<div class="twelve columns" style="padding-top:20px;"&#62;
  <dl class="tabs pill"&#62;
    {exp:channel:entries channel="nwt_2cd_order_location" limit="10" sort="asc"}
       <dd style="padding:5px;" {if count == '1'}class="active"{/if}> <a href="#pillTab{url_title}">{title}&#60;/a&#62;</dd>
    {/exp:channel:entries}
 </dl>

  <ul class="pill tabs-content contained">
          {exp:channel:entries channel="nwt_2cd_order_location" limit="10" sort="asc"}
       <li {if count == '1'}class="active"{/if} id="pillTab{url_title}Tab">
            <!-- li class="active" id="pillTab{url_title}" -->
            <div class="row">                              
                   <!-- MAP BOX -->       
               <div class="twelve columns" style="float:right;"> 
                  {summary}
               </div>

            {if 3rd_order_under}
            <p><strong>Locations within {title}</strong></p>
            {/if}      
         </div>        

      <dl class="tabs pill">
           {exp:playa:children field="3rd_order_under" limit="25" sort="asc"}
               <dd style="padding:5px;" {if count == '1'}class="active"{/if}><a href="#pillTab{url_title}">{title}</a>
               </dd>
          {/exp:playa:children}
      </dl>

<!-- CONTENT FOR 3rd ORDER pill tabs within pill tabs -->

    <ul class="pill tabs-content contained">
     {exp:playa:children field="3rd_order_under" limit="25" sort="asc"}
       <li {if count == '1'}class="active"{/if} id="pillTab{url_title}Tab">
            <div class="row">                                     
               <div class="twelve columns" style="float:right;"> 
                   {summary_3rd_order}<br />

                   {!-- nothing I've done here works
                   exp:playa:siblings entry_id="{4th_order_under_3rd_order}" parent_id="3rd_order_under"}
                   {4th_order_under_3rd_order}
                   {/exp:playa:siblings}
                   --}
               </div>
            </div>
         </li>
       {/exp:playa:children}
       {/exp:channel:entries}     
      </ul>   
    </li>    
  </ul>         

the additional tab selections just stack on top each other instead of replacing the previous selection.

Answer 1

You have still included your JavaScript in the wrong order, jQuery should come first.

How it is now:

<!-- More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.foundation.tabs.js"></script
<!-- END More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.js"></script>
<script src="http://niwot.colorado.edu/eejavascripts/foundation.min.js"></script>

How it must be:

<script src="http://niwot.colorado.edu/eejavascripts/jquery.js"></script>
<!-- More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.foundation.tabs.js"></script
<!-- END More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/foundation.min.js"></script>