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;">
<dl class="tabs pill">
{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}</a></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.