Custom Module Fields Only Show Select Items

[Woodsy]

Hi, I have create a custom module that has a number of tabs running across the top. New tabs can be created or removed by the content creator. Each tab has a group of fields within it called ‘dropdown’.

Each tab can have any number of ‘dropdown’ items. Currently the code is pulling all the dropdown items into each tabs content.

The code for this part is highlighted with <!-- Dropdown Code --> :

	<div class="content-tabs__nav" role="tablist" aria-label="Content Tabs Navigation">
		{% for row in module.tabs %}
 <div role="button" type="button" tabindex="0" {% if loop.first %}aria-selected="true"{% else %}aria-selected="false"{% endif %} class="content-tabs__nav-item {% if loop.first %}active{% endif %}" data-tab="tab-{{ name }}-{{ loop.index }}">
 {{ row.title }}
 </div>
 {% endfor %}
 </div>

	<div class="content-tabs__rows" data-flickity='{ "autoPlay": false, "cellAlign": "left", "imagesLoaded": true, "prevNextButtons": false, "pageDots": true, "wrapAround": true, "watchCSS": true }'>
		{% for row in module.tabs %}
		<div class="content-tabs__row {% if loop.first %}active{% endif %}" id="tab-{{ name }}-{{ loop.index }}">
			{% if row.image.src %}
			<div class="content-tabs__image">
			{% set sizeAttrs = 'width="{{ row.image.width }}" height="{{ row.image.height }}"' %}
			{% if row.image.size_type == 'auto' %}
			{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
			{% elif row.image.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="{{ row.image.max_width }}" height="{{ row.image.max_height }}" style="max-width: 100%; height: auto;"' %}
			{% endif %}
			{% set loadingAttr = row.image.loading != 'disabled' ? 'loading="{{ row.image.loading }}"' : '' %}
			<img src="{{ resize_image_url(row.image.src, 800, 0, 800) }}" alt="{{ row.image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
 </div>
			{% endif %}

			<div class="content-tabs__rich-text">
 {{ row.rich_text }}

 <!-- Dropdown Code -->

 <div class="outer-group-wrapper">
 {% for outer_item in module.tabs %}
 <div class="outer-item">
 {% if outer_item.dropdown %}
 <div>
 {% for inner_item in outer_item.dropdown %}
 {{ inner_item.dropdown_title }}
 {% endfor %}
		 </div>
 {% endif %}
 </div>
 {% endfor %}
 </div>

 <!-- Dropdown Code --> 

 {% set href = row.link.link.url.href %}
 {% if href && row.link.title %}
 {% if row.link.link.url.type is equalto "EMAIL_ADDRESS" %}
 {% set href = "mailto:" + href %}
 {% endif %}
 <a href="{{ href }}" class=""
 {% if row.link.link.open_in_new_tab %}target="_blank"{% endif %}
 {% if row.link.link.rel %}rel="{{ row.link.link.rel }}"{% endif %}
 >
 <span>{{ row.link.title }}</span>
 <span class="button button--arrow button--notext"></span>
 </a>
 {% endif %}
 </div>
		</div>
		{% endfor %}
	</div>

I only want the dropdown item to show for the tab that is open.

So for this example I only want to show Dropdown for Tab 1 in the content for Tab Nav 1.

Thanks

[Victor_Becerra]

Hi there @Woodsy and thank you for posting!

I found some Community resources that can help you troubleshoot your issue:

https://community.hubspot.com/t5/CMS-Development/Tabbed-Content-Module-Duplicating-content-in-Other-Tabs/m-p/777877

https://community.hubspot.com/t5/CMS-Development/Tabs-to-Accordion-Module/m-p/365591

HubSpot | Tabs to Accordion Module

I’d also like to tag a few community experts who may have additional ideas for you. Hey there @Anton @Josh and @TomM2. I hope you’re having a great week! Any additional ideas here?

Thanks!
Victor

[Anton]

Hey @Woodsy,

so the tabs group is a repeater and the dropdown is a repeater inside the tabs repeater, correct?
If so, you need to modify the dropdown for-loop a bit.

Instead of

{% for single_tab in module.tabs %}
...
{% for dropdown in module.tabs %}
...
{% endfor %}
{% endfor %}

write it like

{% for single_tab in module.tabs %}
...
{% for single_dropdown in single_tab.dropdown %}
...
{% endfor %}
{% endfor %}

in order to address the dropdown items of a repeater item. Otherwise, you’ll loop through all dropdowns of all tabs (what’s happening right now)

best,

Anton