# HubSpot Tabber not working

**URL:** <https://community.hubspot.com/t/hubspot-tabber-not-working/36762>\
**Category:** CMS Development\
**Created:** [May 5, 2021, 5:42pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762 "2021-05-05T17:42:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![KarenBP](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/karenbp/32/31639_2.png) [@KarenBP](https://community.hubspot.com/u/KarenBP)\
**Post date:** [May 5, 2021, 5:42pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/1 "2021-05-05T17:42:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [May 6, 2021, 4:47pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/2 "2021-05-06T16:47:11Z")

</div>

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 “#”:

 ![42191i2F7F0170903BECB0.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/7/570dca85cce6d90680de94a435f1298ffe35e48f.png)

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:

```lia-code-sample
// 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!

---

<div class="post-metadata">

**Author:** ![KarenBP](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/karenbp/32/31639_2.png) [@KarenBP](https://community.hubspot.com/u/KarenBP)\
**Post date:** [May 6, 2021, 11:37pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/3 "2021-05-06T23:37:05Z")

</div>

Hey @Kevin-C this worked!  
Thank you so much for your clarification and very quick response.

The screenshot and js code were super helpful. ⭐

---

<div class="post-metadata">

**Author:** ![simonp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonp/32/60590_2.png) [@simonp](https://community.hubspot.com/u/simonp)\
**Post date:** [July 7, 2021, 1:12pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/4 "2021-07-07T13:12:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [July 7, 2021, 1:53pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/5 "2021-07-07T13:53:07Z")

</div>

Hey @simonp

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

---

<div class="post-metadata">

**Author:** ![simonp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonp/32/60590_2.png) [@simonp](https://community.hubspot.com/u/simonp)\
**Post date:** [July 7, 2021, 1:58pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/6 "2021-07-07T13:58:45Z")

</div>

Preview Page - [https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs\_preview=fsKIfGbo-503…](https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-50328930343)

Page based on giant template

---

<div class="post-metadata">

**Author:** ![simonp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonp/32/60590_2.png) [@simonp](https://community.hubspot.com/u/simonp)\
**Post date:** [July 7, 2021, 1:10pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/7 "2021-07-07T13:10:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![simonp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonp/32/60590_2.png) [@simonp](https://community.hubspot.com/u/simonp)\
**Post date:** [July 7, 2021, 1:55pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/8 "2021-07-07T13:55:44Z")

</div>

Preview Page - [https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs\_preview=fsKIfGbo-50328930343](https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-50328930343)

Page based on giant template

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [July 7, 2021, 2:46pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/9 "2021-07-07T14:46:08Z")

</div>

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

 ![KevinC_0-1625669599545.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/0/00ca4fed75ddc3d0205d6b6d5f9625c1918cdedf.png)

---

<div class="post-metadata">

**Author:** ![simonp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simonp/32/60590_2.png) [@simonp](https://community.hubspot.com/u/simonp)\
**Post date:** [July 7, 2021, 3:12pm UTC](https://community.hubspot.com/t/hubspot-tabber-not-working/36762/10 "2021-07-07T15:12:49Z")

</div>

![simonp_0-1625669889198.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/3/73014e17e046bc0d34269560117e5e531cdb2deb.png)

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

 ![simonp_1-1625670549965.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/1/e13fcd609466f7ba21573983dfc6d65a23511672.jpeg)

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

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/e/4ece4cf8cb57038038081b915fadf2f86eade5c2.png)