ESHOPMANESHOPMAN Logo
Our Blog

HubSpot CMS: Displaying Specific Module Content in Tabs

HubSpot CMS: Displaying Specific Module Content in Tabs

The Challenge: Showing the Right Content in the Right Tab

Building custom modules in HubSpot's CMS can unlock powerful content experiences. But sometimes, things don't work quite as expected. Imagine you've created a module with tabs, and each tab should display specific dropdown content. Instead, all the dropdown items show up in every tab. Frustrating, right?

That's exactly the problem a HubSpot user ran into. They had a custom module with tabs, each containing a 'dropdown' field. The goal was to display only the dropdown items associated with the currently open tab. Let's dive into how to solve this.

Screenshot 2026-03-02 102550.png

The original poster shared their code, highlighting the section responsible for rendering the dropdowns:


    {% for outer_item in module.tabs %}
        

            {% if outer_item.dropdown %}
                

                  {% for inner_item in outer_item.dropdown %}
                   {{ inner_item.dropdown_title }}
                    {% endfor %}
	            

            {% endif %}
        

    {% endfor %}

The issue? The code was looping through all dropdowns in all tabs, instead of targeting the dropdowns specific to each tab.

The Solution: Adjusting the For-Loop

The key to solving this lies in adjusting the for loop within your HubL code. A community expert pointed out that the original code was incorrectly iterating through all dropdowns, regardless of which tab they belonged to.

Here's the problematic code (already shown above for context):

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

And here's the corrected code:

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

See the difference? Instead of looping through module.tabs again for the dropdowns, the corrected code loops through single_tab.dropdown. This ensures that you're only accessing the dropdown items associated with the current tab in the loop.

By making this small but crucial change, the dropdown items will now display correctly, showing only the relevant content for each tab.

Additional Resources

A helpful community member also shared links to other relevant discussions, including:

These resources offer further insights into working with tabbed content and responsive design in HubSpot CMS.

ESHOPMAN Team Comment

This is a classic example of how a small coding error can lead to a big headache! The solution highlights the importance of understanding the structure of your data when working with HubL. Properly referencing nested repeaters is crucial for dynamic content rendering. For those using ESHOPMAN, remember that our built-in modules handle much of this complexity automatically, but understanding these principles is still valuable for advanced customization.

Screenshot 2026-03-02 102613.png

Wrapping Up

Working with custom modules in HubSpot can be powerful. By understanding how to correctly loop through nested repeaters, you can ensure that your content displays exactly as intended. This example shows how a simple adjustment to the for loop can solve a common problem, saving you time and frustration. Remember to always double-check your code and consider the data structure you're working with. Happy developing!

Share: