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