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