1

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.

  • Can you clarify your question. What do you mean by "flat fashion"? It sounds as if you aren't firing the relevant javascript at the correct time. It should be fired when the page content has loaded. – foamcow May 13 '14 at 8:43
  • straight forward hmnl/css/js no EE database – Eric May 13 '14 at 16:53
2

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>
| improve this answer | |
  • All and all I spent a lot of time on this little chunk of code and this was the final piece THANKS SO MUCH. – Eric May 13 '14 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.