https://www.drewno.pl/assets/js/tabs.js?v=1790123207

1(function () {
2  'use strict';
3
4  /**
5   * Inicjalizuje zakładki wewnątrz podanego kontenera.
6   * Używa atrybutu data-tab na przyciskach i data-panel na panelach.
7   *
8   * Przykład HTML:
9   *   <div class="section__tabs" data-tabs>
10   *     <button class="section__tab is-active" data-tab="iglaste">Iglaste</button>
11   *     <button class="section__tab" data-tab="lisciaste">Liściaste</button>
12   *   </div>
13   *   <div class="section__tab-panel is-active" data-panel="iglaste">...</div>
14   *   <div class="section__tab-panel" data-panel="lisciaste">...</div>
15   */
16  function initTabs(container) {
17    var tabs   = container.querySelectorAll('[data-tab]');
18    var panels = container.parentElement
19      ? container.parentElement.querySelectorAll('[data-panel]')
20      : [];
21
22    if (!tabs.length) return;
23
24    tabs.forEach(function (tab) {
25      tab.addEventListener('click', function () {
26        var target = this.getAttribute('data-tab');
27
28        // Deactivate all
29        tabs.forEach(function (t) {
30          t.classList.remove('is-active', 'section__tab--active');
31          t.setAttribute('aria-selected', 'false');
32        });
33        panels.forEach(function (p) {
34          p.classList.remove('is-active', 'section__tab-panel--active');
35          p.hidden = true;
36        });
37
38        // Activate clicked
39        this.classList.add('is-active');
40        this.setAttribute('aria-selected', 'true');
41
42        var panel = container.parentElement
43          ? container.parentElement.querySelector('[data-panel="' + target + '"]')
44          : null;
45        if (panel) {
46          panel.classList.add('is-active');
47          panel.hidden = false;
48        }
49      });
50    });
51
52    // Init ARIA

53    tabs.forEach(function (t) {
54      t.setAttribute('role', 'tab');
55      t.setAttribute('aria-selected', t.classList.contains('is-active') ? 'true' : 'false');
56    });
57    panels.forEach(function (p) {
58      p.setAttribute('role', 'tabpanel');
59      p.hidden = !p.classList.contains('is-active');
60    });
61  }
62
63  // Auto-init wszystkich bloków zakładek na stronie
64  function init() {
65    document.querySelectorAll('[data-tabs]').forEach(function (el) {
66      initTabs(el);
67    });
68  }
69
70  if (document.readyState === 'loading') {
71    document.addEventListener('DOMContentLoaded', init);
72  } else {
73    init();
74  }
75
76  // Eksport dla dynamicznie dodawanych sekcji
77  window.DrewnoTabs = { init: init, initTabs: initTabs };
78})();