Very close to working - var_prefix= tabbed and nested

Question

This almost works. its just on load it does not display correctly (all the tab options stack instead nesting) but once you start clicking the tabs they all work fine. (Please also note that when built in flat fashion all tabs work correctly).

The page looks like this: niwot.colorado.edu/index.php/location/test_location

My code looks like this:

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

               {thirdorder:exp:playa:children field="4th_order_under_3rd_order" sort="asc" var_prefix="fourthorder"}
                 {fourthorder:title}
               {/thirdorder:exp:playa:children}

             </div>
           </div>
         </li>
        {/exp:playa:children}  
        </ul>

Thanks for taking the time to look at my problem.

Answer 1

you issue is that all your records have class="active". It is happens because count is going from exp:channel:entries and for all playa records is the same - 1. You have already var_prefix parametr for playa:children, so you just need to add it into condition.

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

               {thirdorder:exp:playa:children field="4th_order_under_3rd_order" sort="asc" var_prefix="fourthorder"}
                 {fourthorder:title}
               {/thirdorder:exp:playa:children}

             </div>
           </div>
         </li>
        {/exp:playa:children}  
        </ul>