You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

31 lines
1.0 KiB
JavaScript

2 years ago
function tabify( element ){
const header = element.querySelector('.gator-tabs-header');
const content = element.querySelector('.gator-tabs');
const tab_headers = [...header.children];
const tab_contents = [...content.children];
tab_contents.forEach( x => x.style.display = 'none');
let current_tab_index = -1;
function setTab( index ){
if( current_tab_index > -1 ){
tab_headers[ current_tab_index ].style.fontWeight = 400;
tab_contents[ current_tab_index ].style.display = 'none';
}
tab_headers[ index ].style.fontWeight = 800;
tab_contents[ index ].style.display = 'flex';
current_tab_index = index;
}
default_tab_index = tab_headers.findIndex( x => {
return [...x.classList].indexOf('default-gator-tab') > -1;
});
default_tab_index = default_tab_index === -1 ? 0 : default_tab_index;
setTab( default_tab_index );
tab_headers.forEach((x,i) => x.onclick = event => setTab(i));
}
// this is where the magic happens!
[...document.querySelectorAll('.gator-tabs-container')]
.forEach(x => tabify(x));