HubSpot Tabber not working

[KarenBP]

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]);
}

[simonp]

Thanks Kevin i dont seem to see main.js in the html inspector altough as i look with hubspot design i can see main.js with the theme folder 

THIS LOOKS SUSPICIOUSLY LIKE SMOOTH SCROLLING SCRIPT  i try and add this to a cloneed version of the script

[Kevin-C]

@simonp So you're function is located in the main.js

[simonp]

Preview Page - https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-503...

Page based on giant template

[simonp]

SimilAar problem - just trying to find the global.js file or what file gets added to the compiled js file

[Kevin-C · Accepted solution]

Hey @KarenBP 

Looks like you're smooth scrolling function in the Global.js file is causing this issue.

In the screen shot below you can see that the function is targeting all anchor tags that have an href containing a "#":

To test that this was the issue I added the ID "responsive-menu-button" which as you can see excludes it from the smooth scrolling function.

The fastest solution might be to add the "hs-tabs__navitem" class to the smoothscroll function's exclusion list. The ".not" function:

// smooth scrolling
        if ($('.horizontal-tab-wrapper').length === 0 || $('.hs-content-path-growth-pipeline-assessment').length === 0) {
            $('a[href*="#"]').not('#responsive-menu-button, .hs-tabs__navitem').click(function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                  console.log(target)
                  if (target.length) {
                    $('html,body').animate({
                      scrollTop: target.offset().top
                    }, 1000);
                    return false;
                  }
                }
            });
        }

 FYI: I was not able to test this.

Hope this gets you moving!

[KarenBP]

Hey @Kevin-C this worked! 

Thank you so much for your clarification and very quick response. 

The screenshot and js code were super helpful. ⭐

[simonp]

Hello Karen - got a similar problem - struggling to locate the relevant js file

[Kevin-C]

Hey @simonp 

If you could post a link i'm sure we can help ya dig it up!

[simonp]

Preview Page - https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-503...

Page based on giant template