It sounds like mastafu identified an issue but I’m not sure what to do about it. Artificially increment the loop index by 1?
Here’s my nested tabs, but in Twig:
{# parent tabs #}
<ul class="tabs tabs--parents" data-tabs id="parent-tabs">
{% for parent_tab in component.tabs %}
<li class="tabs-title tabs--parents__title{% if loop.first %} is-active{% endif %}">
<a data-tabs-target="panel-{{loop.index}}" href="#panel-{{ loop.index }}" {% if loop.first %}aria-selected="true"{% endif %}>{{ parent_tab.tab_title }}</a>
</li>
{% endfor %}
</ul>
{# end parent tabs #}
{# parent content panels #}
{% for parent_panel in component.tabs %}
<div class="tabs-content" data-tabs-content="parent-tabs">
<div class="tabs-panel tabs-panel--parents {% if loop.first %}is-active{% endif %}" id="panel-{{ loop.index }}">
{# child tabs #}
<ul class="tabs tabs--sub-tabs" data-tabs id="sub-tabs">
{% for child_tab in parent_panel.sub_tabs %}
<li class="tabs-title tabs--sub-tabs__title{% if loop.first %} is-active{% endif %}">
<a data-tabs-target="sub-tab-panel-{{loop.index}}" href="#sub-tab-panel-{{ loop.index }}" {% if loop.first %}aria-selected="true"{% endif %}>{{ child_tab.sub_tab_title }}</a>
</li>
{% endfor %}
</ul>
{# end child tabs #}
{# child content panels #}
{% for sub_content in parent_panel.sub_tabs %}
<div class="tabs-content" data-tabs-content="sub-tabs">
<div class="tabs-panel tabs-panel--sub-tabs {% if loop.first %}is-active{% endif %}" id="sub-tab-panel-{{ loop.index }}">
{{ sub_content.sub_tab_content }}
</div>
</div>
{% endfor %}
{# end child content panels #}
</div>
{% endfor %}
{# end parent content panels #}
Same odd behaviour: The parent panels (which each contain a unique set of sub tabs) all work, but curiously only the first sub tab works; subsequent sub tabs add their respective panel content to the page, but don’t switch the panel over. I thought this might be related to the Foundation Tabs, but all the ids, data-tabs-targets and hrefs are looping as expected.
