From 56bc99b79a9ce5370c718d1bc0e283a3fa0de05a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 7 Feb 2023 18:06:34 +0100
Subject: [PATCH] tabs: nested tabs content is not displayed #468

---
 layouts/partials/shortcodes/tabs.html |  2 +-
 static/css/tabs.css                   | 26 +++++++++++++-------------
 static/js/theme.js                    |  9 ++++++---
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index dc1a910b0f..4f8440febc 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -18,7 +18,7 @@
     {{- range $idx, $tab := $tabs }}
     <div
       data-tab-item="{{ .name }}"
-      class="tab-item {{ cond (eq $idx 0) "active" ""}}"
+      class="tab-content-text {{ cond (eq $idx 0) "active" ""}}"
     >
 {{ .content | safeHTML }}
     </div>
diff --git a/static/css/tabs.css b/static/css/tabs.css
index b973531aeb..d58bf479b9 100644
--- a/static/css/tabs.css
+++ b/static/css/tabs.css
@@ -1,4 +1,8 @@
-#body .tab-nav-button {
+#body .tab-panel{
+    margin-bottom: 1.5rem;
+    margin-top: 1.5rem;
+}
+#body .tab-nav-button{
     background-color: rgba( 134, 134, 134, .166 );
     border-color: rgba( 134, 134, 134, .333 );
     border-radius: 4px 4px 0 0;
@@ -16,27 +20,23 @@
     padding: 6px 12px;
     position: relative;
 }
-#body .tab-nav-button.direction-rtl {
+#body .tab-nav-button.direction-rtl{
     float: right;
 }
 
-#body .tab-nav-button:first-child {
+#body .tab-nav-button:first-child{
     margin-inline-start: 9px;
 }
-#body .tab-nav-button:not(.active) {
+#body .tab-nav-button:not(.active){
     border-bottom-color: rgba( 134, 134, 134, .1 );
     margin-top: 8px;
     padding-bottom: 2px !important;
     padding-top: 2px !important;
 }
-#body .tab-nav-button:not(.active) span {
+#body .tab-nav-button:not(.active) span{
     opacity: .8;
 }
-#body .tab-panel {
-    margin-bottom: 1.5rem;
-    margin-top: 1.5rem;
-}
-#body .tab-content {
+#body .tab-content{
     background-color: transparent;
     border-color: rgba( 134, 134, 134, .333 );
     border-style: solid;
@@ -48,15 +48,15 @@
     padding: 8px;
     z-index: 10;
 }
-#body .tab-content .tab-item{
+#body .tab-content-text{
     display: none;
 }
 
-#body .tab-content .tab-item.active{
+#body .tab-content-text.active{
     display: block;
 }
 
-#body .tab-item pre{
+#body .tab-content-text pre{
     margin-bottom: 0;
     margin-top: 0;
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index 80ae9f944a..8756863c02 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -59,17 +59,20 @@ function switchTab(tabGroup, tabId) {
         return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
     });
     var allTabItems = tabs && tabs.reduce( function( a, e ){
-        return a.concat( Array.from( e.querySelectorAll( '.tab-nav-button, .tab-item' ) ) );
+        return a.concat( Array.from( e.querySelectorAll( '[data-tab-item]' ) ).filter( function( es ){
+            return es.parentNode.parentNode == e;
+        }) );
     }, [] );
     var targetTabItems = tabs && tabs.reduce( function( a, e ){
-        return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ) );
+        return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ).filter( function( es ){
+            return es.parentNode.parentNode == e;
+        }) );
     }, [] );
 
     // if event is undefined then switchTab was called from restoreTabSelection
     // so it's not a button event and we don't need to safe the selction or
     // prevent page jump
     var isButtonEvent = event && event.target && event.target.getBoundingClientRect;
-
     if(isButtonEvent){
       // save button position relative to viewport
       var yposButton = event.target.getBoundingClientRect().top;