I downloaded the HubSpot Tabber from the marketplace.
We’re going to use it for a podcast for our clients.
It works when I try it on the HubSpot Preview and Editor, but when I open a new tab or the live page, it won’t work and it won’t stop scrolling to the top whenever I click on the second tab.
I think this might be a problem with JS, I just started learning, so I don’t know how to catch it quickly. Client needs it for this week, so any help is deeply appreciated. Thanks in advance for your time.
Live page example here:
https://www.cmtc.com/shiftinggears
[----------- Module HTML -----------]
<div class=“hs-tabs”>
<ul class=“hs-tabs__nav”>
{% for item in module.tab -%}
<li><a href=“#tab-{{ loop.index }}” class=“hs-tabs__navitem{% if loop.index == 1 %} hs-tabs__navitem–active{% endif %}”>{% inline_text field=“tab_label” value=“{{ item.tab_label }}” %}</a></li>
{%- endfor %}
</ul>
{% for item in module.tab %}
<div id=“tab-{{ loop.index }}” class=“hs-tabs__item{% if loop.index == 1 %} hs-tabs__item–active{% endif %}”>{% inline_rich_text field=“content” value=“{{ item.content }}” %}</div>
{% endfor %}
</div>
{% require_css %}
<style>
.hs-tabs__navitem:not(.hs-tabs__navitem--active) {
background-color: {{ module.tab_bg_color.color }};
color: {{ module.tab_text_color.color }};
}
</style>
{% end_require_css %}
[-------- Module CSS----------]
.hs-tabs__item{
display: none;
padding: 20px;
border: 1px solid #efefef;
}
.hs-tabs__item--active{
display: block;
}
.hs-tabs__item img{
/* Protect images from overflowing the tab */
max-width: 100%;
height: auto;
}
.hs-tabs__nav{
list-style: none;
margin: 0;
padding: 0;
margin-bottom: -1px;
}
.hs-tabs__nav li{
display: inline-block;
}
.hs-tabs__navitem{
text-decoration: none;
display: block;
padding: 20px;
border: 1px solid #efefef;
border-bottom: none;
}
.hs-tabs__navitem--active{
color: #000;
background: #fff;
}
/* fix for hubspot injected div */
.hs-tabs__navitem *{
pointer-events: none;
}
[------------- Module JS-------------]
function tabs(context){
var nav = context.querySelector(‘.hs-tabs__nav’),
tabs = nav.querySelectorAll(‘a’),
content = context.querySelectorAll(‘.hs-tabs__item’),
switchTabs = function(id){
removeClassAll(content, ‘hs-tabs__item--active’);
context.querySelector(id).classList.add(‘hs-tabs__item--active’);
},
tabEvent = function(event){
if(event.target.nodeName == “A”){
event.preventDefault();
switchTabs(event.target.getAttribute(‘href’));
removeClassAll(tabs, ‘hs-tabs__navitem--active’);
event.target.classList.add(‘hs-tabs__navitem--active’);
}
},
removeClassAll = function(elemArr, className){
for(var i = elemArr.length; i--;){
elemArr[i].classList.remove(className);
}
},
init = (function(){
nav.addEventListener(‘click’, tabEvent);
})();
}
var tabbers = document.querySelectorAll(‘.hs-tabs’);
for(var i = tabbers.length; i--;){
tabs(tabbers[i]);
}
