Tab Selector

tab-selector.js

"use strict";

window.addEventListener("load", function () {
  var tabLinks = document.querySelectorAll(".search-results__tab-link");
  var tabs = document.querySelectorAll(".search-results__tab");

  tabLinks.forEach(function (element) {
    element.addEventListener("click", function (event) {
      activateTab(event.target.dataset.tabId);
    });
  });

  activateTab('page-results');

  function activateTab(id) {
    tabs.forEach(function (element) {
      element.id === id
        ? element.classList.add("active")
        : element.classList.remove("active");
      element.id === id
        ? element.classList.remove("hidden")
        : element.classList.add("hidden");
    });
    tabLinks.forEach(function (element) {
      element.dataset.tabId === id
        ? element.classList.add("active")
        : element.classList.remove("active");
    });
  }
});