Support

Account

Home Forums Add-ons Repeater Field Problem occurs when output as tabs for nested repeater field Reply To: Problem occurs when output as tabs for nested repeater field

  • 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.