assets/js/tabs.js

   1 const removeActiveClasses = function (ulElement) {
   2     const lis = ulElement.querySelectorAll('li');
   3     Array.prototype.forEach.call(lis, function(li) {
   4         li.classList.remove('active');
   5     });
   6   }
   7
   8   const getChildPosition = function (element) {
   9         var parent = element.parentNode;
  10         var i = 0;
  11         for (var i = 0; i < parent.children.length; i++) {
  12             if (parent.children[i] === element) {
  13                 return i;
  14             }
  15         }
  16
  17         throw new Error('No parent found');
  18     }
  19
  20 window.addEventListener('load', function () {
  21     const tabLinks = document.querySelectorAll('ul.tab li a');
  22
  23     Array.prototype.forEach.call(tabLinks, function(link) {
  24       link.addEventListener('click', function (event) {
  25         event.preventDefault();
  26
  27         liTab = link.parentNode;
  28         ulTab = liTab.parentNode;
  29         position = getChildPosition(liTab);
  30         if (liTab.className.includes('active')) {
  31           return;
  32         }
  33
  34         removeActiveClasses(ulTab);
  35         tabContentId = ulTab.getAttribute('data-tab');
  36         tabContentElement = document.getElementById(tabContentId);
  37         removeActiveClasses(tabContentElement);
  38
  39         tabContentElement.querySelectorAll('li')[position].classList.add('active');
  40         liTab.classList.add('active');
  41       }, false);
  42     });
  43 });