diff --git a/assets/js/shortcodes/tabs.js b/assets/js/shortcodes/tabs.js index a08c4601..6a64c57e 100644 --- a/assets/js/shortcodes/tabs.js +++ b/assets/js/shortcodes/tabs.js @@ -5,7 +5,25 @@ function initTabs() { const container = button.closest(".tab__container"); const tabIndex = parseInt(button.dataset.tabIndex); - activateTab(container, tabIndex); + const tabLabel = button.dataset.tabLabel; + const group = container.dataset.tabGroup; + + if (group) { + const allGroupContainers = document.querySelectorAll(`.tab__container[data-tab-group="${group}"]`); + + allGroupContainers.forEach((groupContainer) => { + const targetButton = Array.from(groupContainer.querySelectorAll(".tab__button")).find( + (btn) => btn.dataset.tabLabel === tabLabel, + ); + + if (targetButton) { + const targetIndex = parseInt(targetButton.dataset.tabIndex); + activateTab(groupContainer, targetIndex); + } + }); + } else { + activateTab(container, tabIndex); + } }; document.addEventListener("click", tabClickHandler); diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html index b785f906..3aebcacb 100644 --- a/layouts/shortcodes/tabs.html +++ b/layouts/shortcodes/tabs.html @@ -1,8 +1,10 @@ {{- .Store.Set "tab-index" 0 -}} {{- $noop := .Inner -}} +{{- $group := .Get "group" -}} -
+ +
{{- range $nTabs, $_ := .Store.Get "tabs" -}} @@ -12,7 +14,8 @@ {{ end }}" role="tab" aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}" - data-tab-index="{{ $nTabs }}"> + data-tab-index="{{ $nTabs }}" + data-tab-label="{{ index . "label" }}"> {{ with index . "icon" }} {{ partial "icon.html" . }}