https://nub.ba/assets/js/kursevi-switcher.js

1(function () {
2  const root = document.getElementById('kursevi');
3  if (!root) return;
4
5  const body = root.querySelector('.kursevi-body');
6
7  const leftTab  = root.querySelector('.kursevi-tabs .tab.left');
8  const rightTab = root.querySelector('.kursevi-tabs .tab.right');
9  if (!leftTab || !rightTab) return;
10
11  // accept either class name for the <img>
12  const leftImg  = leftTab.querySelector('.tab-ikonica, .tab-icon');
13  const rightImg = rightTab.querySelector('.tab-ikonica, .tab-icon');
14
15  const ICONS = {
16    leftActive:   '../assets/img/bibliotecka_pismenost1.webp',
17    leftInactive: '../assets/img/bibliotecka_pismenost2.webp',
18    rightActive:  '../assets/img/info_pismenost1.webp',
19    rightInactive:'../assets/img/info_pismenost2.webp'
20  };
21
22  function setIconsFor(side) {
23    if (!leftImg || !rightImg) return;
24    if (side === 'left') {
25      leftImg.src  = ICONS.leftActive;
26      rightImg.src = ICONS.rightInactive;
27    } else {
28      leftImg.src  = ICONS.leftInactive;
29      rightImg.src = ICONS.rightActive;
30    }
31  }
32
33  function activate(side) {
34    leftTab.classList.toggle('active',  side === 'left');
35    rightTab.classList.toggle('active', side === 'right');
36
37    if (body) {
38      body.classList.toggle('active-left',  side === 'left');
39      body.classList.toggle('active-right', side === 'right');
40    }
41
42    // (optional) state flags on #kursevi if you style via parent
43    root.classList.toggle('state-left',  side === 'left');
44    root.classList.toggle('state-right', side === 'right');
45
46    setIconsFor(side);
47  }
48
49  // init from markup (defaults to left)
50  const initSide =
51    root.querySelector('.kursevi-tabs .tab.active')?.dataset.side === 'right'
52      ? 'right'
53      : 'left';
54  activate(initSide);
55
56  leftTab.addEventListener('click',  () => activate('left'));
57  rightTab.addEventListener('click', () => activate('right'));
58})();