I can add and show tabs with lazy loading and content management

src/myfasthtml/assets/myfasthtml.js

@@ -206,4 +206,64 @@ function initBoundaries(elementId, updateUrl) {
     });
     observer.observe(container.parentNode, {childList: true});
   }
+}
+
+/**
+ * Updates the tabs display by showing the active tab content and scrolling to make it visible.
+ * This function is called when switching between tabs to update both the content visibility
+ * and the tab button states.
+ *
+ * @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-content-controller")
+ */
+function updateTabs(controllerId) {
+  const controller = document.getElementById(controllerId);
+  if (!controller) {
+    console.warn(`Controller ${controllerId} not found`);
+    return;
+  }
+
+  const activeTabId = controller.dataset.activeTab;
+  if (!activeTabId) {
+    console.warn('No active tab ID found');
+    return;
+  }
+
+  // Extract manager ID from controller ID (remove '-content-controller' suffix)
+  const managerId = controllerId.replace('-content-controller', '');
+
+  // Hide all tab contents for this manager
+  const contentWrapper = document.getElementById(`${managerId}-content-wrapper`);
+  if (contentWrapper) {
+    contentWrapper.querySelectorAll('.mf-tab-content').forEach(content => {
+      content.classList.add('hidden');
+    });
+
+    // Show the active tab content
+    const activeContent = document.getElementById(`${managerId}-${activeTabId}-content`);
+    if (activeContent) {
+      activeContent.classList.remove('hidden');
+    }
+  }
+
+  // Update active tab button styling
+  const header = document.getElementById(`${managerId}-header`);
+  if (header) {
+    // Remove active class from all tabs
+    header.querySelectorAll('.mf-tab-button').forEach(btn => {
+      btn.classList.remove('mf-tab-active');
+    });
+
+    // Add active class to current tab
+    const activeButton = header.querySelector(`[data-tab-id="${activeTabId}"]`);
+    if (activeButton) {
+      activeButton.classList.add('mf-tab-active');
+
+      // Scroll to make active tab visible if needed
+      activeButton.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }
 }