CMS Development

tommitchell
Contributor

Stop scroll on tab click in Tabber module

SOLVE

Hi - I'm using the Tabber module from marketplace and am having a problem whereby clicking on a tab scrolls down to the content within it, which can be troublesome from a UX perspective. Any clues on how to prevent this please? Live page example is at https://www.goodlord.co/events

 

Thanks in advance!

 

<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 %}

 

 

.hs-tabs__item{
display: none;
padding: 40px 20px 20px 20px;
/*border: 1px solid #efefef; */
}
.hs-tabs__item--active{
display: inline-block;
background-color: #ffffff;

}

.hs-tabs__item--active:focus {
outline: none !important;
}


.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;
}

 

 

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

0 Upvotes
1 Accepted solution
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Stop scroll on tab click in Tabber module

SOLVE

@tommitchell inside of the js file "preloader.min.js" is a smooth scroll function that targets any link that starts with "#". You should exclude the tabber tabs from the smooth scroll function and that will fix your issue. 🙂

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

0 Upvotes
2 Replies 2
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Stop scroll on tab click in Tabber module

SOLVE

@tommitchell inside of the js file "preloader.min.js" is a smooth scroll function that targets any link that starts with "#". You should exclude the tabber tabs from the smooth scroll function and that will fix your issue. 🙂

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
tommitchell
Contributor

Stop scroll on tab click in Tabber module

SOLVE

Brilliant - that has done the job! Thanks so much for your help Stefen.

0 Upvotes