tsv08kulmbach-website/public/assets/js/group-tabs.js

(function () {
    'use strict';

    function init(el) {
        const buttons = [...el.querySelectorAll('[role="tab"]')];
        const panels  = [...el.querySelectorAll('[role="tabpanel"]')];

        // Alle außer dem ersten verstecken
        panels.forEach(function (p, i) { if (i > 0) p.hidden = true; });

        buttons.forEach(function (btn, i) {
            btn.addEventListener('click', function () { activate(i); });
            btn.addEventListener('keydown', function (e) {
                if (e.key === 'ArrowRight') { e.preventDefault(); activate((i + 1) % buttons.length); }
                if (e.key === 'ArrowLeft')  { e.preventDefault(); activate((i - 1 + buttons.length) % buttons.length); }
                if (e.key === 'Home')        { e.preventDefault(); activate(0); }
                if (e.key === 'End')         { e.preventDefault(); activate(buttons.length - 1); }
            });
        });

        function activate(index) {
            buttons.forEach(function (b, i) {
                b.setAttribute('aria-selected', i === index ? 'true' : 'false');
            });
            panels.forEach(function (p, i) { p.hidden = i !== index; });
            buttons[index].focus();
        }
    }

    document.querySelectorAll('[data-group-tabs]').forEach(init);
}());