buttons?

NASA-IMPACT · Dec 30, 2024 · 7ec5eb9 · 7ec5eb9
1 parent a61f05d
commit 7ec5eb9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/_tabs/Assessment.md b/_tabs/Assessment.md
@@ -85,10 +85,10 @@ order: 3
 <!-- Tab Navigation -->
     <div class="tabs-nav">
         <!-- Radio buttons for team tab control -->
-        <button class="tab-button active" onclick="showTab('overview')">Overview</button>
-        <button class="tab-button" onclick="showTab('roles')">Roles</button>
-        <button class="tab-button" onclick="showTab('tools')">Tools</button>
-        <button class="tab-button" onclick="showTab('processes')">Processes</button>
+        <button class="tab-button active" data-tab="overview">Overview</button>
+        <button class="tab-button" data-tab="roles">Roles</button>
+        <button class="tab-button" data-tab="tools">Tools</button>
+        <button class="tab-button" data-tab="processes">Processes</button>
     </div>
     <!--Container for all Assessment Tabs> -->
     <div id="overview" class="tab-content active">
@@ -441,22 +441,24 @@ function toggleCard(header) {
     });
 }
 
-function showTab(tabName) {
-    // Hide all tabs
+function showTab(tabName, event) {
+    // Hide all tab content
     document.querySelectorAll('.tab-content').forEach(content => {
         content.classList.remove('active');
     });
-
+     
     // Remove active class from all buttons
     document.querySelectorAll('.tab-button').forEach(button => {
         button.classList.remove('active');
     });
-
-    // Show selected tab
+     
+    // Show selected tab content
     document.getElementById(tabName).classList.add('active');
-
-    // Highlight active button
-    event.target.classList.add('active');
+
+    // Add active class to clicked button
+    if (event && event.target) {
+        event.target.classList.add('active');
+    }
 }
 </script>
 

diff --git a/_tabs/Implementation.md b/_tabs/Implementation.md
@@ -480,7 +480,6 @@ SNWG projects progress through several key decision gates that ensure proper dev
         </div>
       </div>
     </div>
-
     <div class="doc-category">
       <button class="doc-toggle active" onclick="toggleSection(this)">
         <i class="fas fa-folder"></i>
@@ -502,7 +501,6 @@ SNWG projects progress through several key decision gates that ensure proper dev
         </div>
       </div>
     </div>
-
     <div class="doc-category">
       <button class="doc-toggle active" onclick="toggleSection(this)">
         <i class="fas fa-folder"></i>

diff --git a/_tabs/index.md b/_tabs/index.md
@@ -1383,4 +1383,24 @@ document.addEventListener('keydown', function(event) {
         activeHeaders.forEach(header => toggleCard(header));
     }
 });
+
+function showTab(tabName, event) {
+    // Hide all tab content
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+
+    // Remove active class from all buttons
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.classList.remove('active');
+    });
+
+    // Show selected tab content
+    document.getElementById(tabName).classList.add('active');
+
+    // Add active class to clicked button
+    if (event && event.target) {
+        event.target.classList.add('active');
+    }
+}
 </script>