https://secure.aos.org/Custom/js/modules/tabs/index.js

1export class Tabs {
2  constructor() {
3    this.tabs = document.querySelectorAll('.tabs');
4    if(this.tabs.length) this.init();
5  }
6
7  init = () => {
8    this.tabs.forEach(tab => {
9      const tabButtons = tab.querySelectorAll('[role="tab"]');
10      const tabPanels = Array.from(tab.querySelectorAll('[role="tabpanel"]'));
11
12      tabButtons.forEach(button => {
13        button.addEventListener('click', tabClickHandler);
14      })
15
16      function tabClickHandler(e) {
17        //Hide All Tabpane
18        tabPanels.forEach(panel => {
19          panel.hidden = 'true';
20        });
21
22        //Deselect Tab Button
23        tabButtons.forEach( button => {
24          button.setAttribute('aria-selected', 'false');
25        });
26
27        //Mark New Tab
28        e.currentTarget.setAttribute('aria-selected', 'true');
29
30        //Show New Tab
31        const { id } = e.currentTarget;
32
33        const currentTab = tabPanels.find(
34          panel => panel.getAttribute('aria-labelledby') === id
35        );
36
37        currentTab.hidden = false;
38      }
39    });
40  }
41}