Hello,
I’m fairly new to creating modules in HubL and I’ve been trying to create a tabbed card module with a 2 column layout for a bit now. I duplicated the module from an existing tabbed module in Hubspot, and for the most part, it works.
The main problem I’m having now is that the content from every other tab is being duplicated in each tab. How would I make it so only the desired content is in its respective tab?
This is my code along with a screenshot the fields I’ve created:
{# Tab content #}
{% set hidden_class = "" %}
<div class="hs-tabs__content">
{% for tab in module.tabs %}
{% set hidden_class = "hs-tabs__content__panel--visible" if loop.first %}
<div
class="hs-tabs__content__panel {{ hidden_class }}"
tabindex="0"
role="tabpanel"
id="hs-tabs__content__panel-{{ loop.index }}--{{ name }}"
aria-labelledby="hs-tabs__tab-{{ loop.index }}--{{ name }}"
>
{% for item in module.tabs %}
<div class="tabs_inside_container">
{% for item2 in item.tab_group_1 %}
<div class="row">
<div class="tabs_column">
<div class="tabs_video_container">
{% if item2.tab_video.player_id %}
{% set max_width = item2.tab_video.size_type == 'auto_custom_max' ? item2.tab_video.max_width : item2.tab_video.width %}
{% set max_height = item2.tab_video.size_type == 'auto_custom_max' ? item2.tab_video.max_height : item2.tab_video.height %}
{% video_player "embed_player"
player_id={{ item2.tab_video.player_id }}
type={{ item2.tab_video.player_type || 'scriptV4' }}
full_width={{ item2.tab_video.size_type == 'auto_full_width' }},
conversion_asset={{ item2.tab_video.conversion_asset|tojson|safe }}
autoplay={{ item2.tab_video.autoplay }}
hidden_controls={{ item2.tab_video.hide_controls }}
loop={{ item2.tab_video.loop_video }}
muted={{ item2.tab_video.mute_by_default }}
%}
{% endif %}
</div>
</div>
<div class="tabs_column">
<div class="tabs_inside_content">
<h2>{% inline_text field="tab_headline" value="{{ item2.tab_headline }}" %}</h2>
{% inline_rich_text field="content" value="{{ item2.content }}" %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
Below are the example and the fields I have currently in place.
Hey, @JWatson04 
Thank you for reaching out. Let’s invite some of our community members to the conversation — hey @BarryGrennan @Jnix284 @Kevin-C, can you offer @JWatson04 any tips? Or suggestions on other ways they can tackle this project?
Thank you very much! — Jaycee
Happy to help point you in the right direction @JWatson04 , check out this example showing how to convert tabs to an accordion on mobile, I think it will help to see a working example so you can try to solve the issue 
Thank you so much for sending that over, it helped me move this project along!
It looks like now the only problem I’m having is that the content from other tabs is being pulled in across all other tabs.
Are there any solutions to prevent the same content from being duplicated in all of the tabs?
This is my code now:
<div class="tabs-container">
<div class="tabs-btn-container">
{% for item in module.tabbed_card_group %}
<button {% if loop.index == 1 %}class="tab-button active"{% endif %} data-id="{{loop.index}}">{{ item.tab_title }}</button>
{% endfor %}
</div>
{% for item in module.tabbed_card_group %}
{% inline_text field="tab_title" value="{{ item.tab_title }}" %}
{% endfor %}
<div class="tabs-content-container">
{% for item2 in item.field_group %}
<div class="tabs-inside-content active" id="{{loop.index}}">
<div class="row">
{% if loop.index %}
<div class="tabs-column">
<div class="tabs-video-container">
{% if item2.tab_video.player_id %}
{% set max_width = item2.tab_video.size_type == 'auto_custom_max' ? item2.tab_video.max_width : item2.tab_video.width %}
{% set max_height = item2.tab_video.size_type == 'auto_custom_max' ? item2.tab_video.max_height : item2.tab_video.height %}
{% video_player "embed_player"
player_id={{ item2.tab_video.player_id }}
type={{ item2.tab_video.player_type || 'scriptV4' }}
full_width={{ item2.tab_video.size_type == 'auto_full_width' }},
conversion_asset={{ item2.tab_video.conversion_asset|tojson|safe }}
autoplay={{ item2.tab_video.autoplay }}
hidden_controls={{ item2.tab_video.hide_controls }}
loop={{ item2.tab_video.loop_video }}
muted={{ item2.tab_video.mute_by_default }}
%}
{% endif %}
</div>
</div>
<div class="tabs-column">
<div class="tabs-content">
{% inline_text field="tab_content_headline" value="{{ item2.tab_content_headline }}" %}
{% inline_rich_text field="tab_content" value="{{ item2.tab_content }}" %}
</div>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
@JWatson04 you’re welcome!
I’m pretty sure the duplicated tab content is going to be caused by your JS, not the module code.
Are you using the module JS or referencing an external JS for the theme that you’re building the module for?
I was using the JS that was from the example that was sent over and I was getting an “Uncaught ReferenceError: $ is not defined”. I think jQuery needs to be converted to JS, but I’m not experienced enough to convert jQuery to JS.
This is what outputs to the page when I use the JS from the example code:
@JWatson04 yes, unfortunately converting jQuery to JS is not my area of expertise either 
Maybe one of the others will still be able to help!
That’s all right @Jnix284 , thank you for your help anyway!
Hey @JWatson04 is there anyway you could ZIP and send the module code or get it up on GitHub? That would make it much easier to collaborate. Im sure we can find a solution that works for you rather quickly!
