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