2023-08-02 21:24:52 +01:00
|
|
|
document.querySelectorAll('.tabs-toggle').forEach(function (button) {
|
|
|
|
button.addEventListener('click', function (e) {
|
|
|
|
// set parent tabs to unselected
|
|
|
|
const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
|
2023-08-12 19:53:14 +01:00
|
|
|
tabs.map(tab => tab.dataset.state = '');
|
2023-08-02 21:24:52 +01:00
|
|
|
|
|
|
|
// set current tab to selected
|
2023-08-12 19:53:14 +01:00
|
|
|
e.target.dataset.state = 'selected';
|
2023-08-02 21:24:52 +01:00
|
|
|
|
|
|
|
// set all panels to unselected
|
|
|
|
const panelsContainer = e.target.parentElement.nextElementSibling;
|
|
|
|
Array.from(panelsContainer.children).forEach(function (panel) {
|
2023-08-12 19:53:14 +01:00
|
|
|
panel.dataset.state = '';
|
2023-08-02 21:24:52 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
const panelId = e.target.getAttribute('aria-controls');
|
|
|
|
const panel = panelsContainer.querySelector(`#${panelId}`);
|
2023-08-12 19:53:14 +01:00
|
|
|
panel.dataset.state = 'selected';
|
2023-08-02 21:24:52 +01:00
|
|
|
});
|
|
|
|
});
|