add optional tab sync restriction, to sync only down the page

qdrant-landing/themes/qdrant-2024/assets/js/tab-sync.js

@@ -3,6 +3,30 @@
  * Add data-tab-sync="group-id" to the tab container (parent of tab buttons).
  * Tab buttons must have data-tab with matching values across synchronized groups.
  * Programmatic clicks (isTrusted: false) are ignored to avoid sync loops.
+ *
+ * Optional data-tab-sync-direction:
+ * - "down-only": only sync to tab groups that appear later in the DOM (below the clicked one).
+ *   E.g. with A, B, C: A syncs B and C; B syncs C; C syncs none.
+ *
+ * @example Basic usage (bidirectional sync)
+ * <div data-tab-sync="my-tabs">
+ *   <button data-tab="cloud">Cloud</button>
+ *   <button data-tab="on-prem">On-Premise</button>
+ * </div>
+ * <div data-tab-sync="my-tabs">
+ *   <button data-tab="cloud">Cloud</button>
+ *   <button data-tab="on-prem">On-Premise</button>
+ * </div>
+ *
+ * @example Down-only (sync flows downward only)
+ * <div data-tab-sync="pricing" data-tab-sync-direction="down-only">
+ *   <button data-tab="cloud">Cloud</button>
+ *   <button data-tab="on-prem">On-Premise</button>
+ * </div>
+ * <div data-tab-sync="pricing" data-tab-sync-direction="down-only">
+ *   <button data-tab="cloud">Cloud</button>
+ *   <button data-tab="on-prem">On-Premise</button>
+ * </div>
  */
 export function initTabSync() {
   document.addEventListener(
@@ -18,8 +42,20 @@ export function initTabSync() {
       const tabId = tab.getAttribute('data-tab');
       if (!syncGroup || !tabId) return;
 
-      document.querySelectorAll(`[data-tab-sync="${syncGroup}"]`).forEach((group) => {
-        if (group === container) return;
+      const groups = [...document.querySelectorAll(`[data-tab-sync="${syncGroup}"]`)];
+      const hasDownOnly = groups.some((g) => g.getAttribute('data-tab-sync-direction') === 'down-only');
+
+      const shouldSyncTo = (group) => {
+        if (group === container) return false;
+        if (hasDownOnly) {
+          const groupIsBelow = !!(container.compareDocumentPosition(group) & Node.DOCUMENT_POSITION_FOLLOWING);
+          if (!groupIsBelow) return false;
+        }
+        return true;
+      };
+
+      groups.forEach((group) => {
+        if (!shouldSyncTo(group)) return;
         const matchingTab = group.querySelector(`[data-tab="${tabId}"]`);
         if (matchingTab) matchingTab.click();
       });

qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-doors.html

@@ -2,7 +2,7 @@
 <section class="{{ $class }}">
   <div class="container">
     {{/* Navigation Tabs – data-tab-sync groups tab switching across sections */}}
-    <div class="{{ $class }}__tabs" data-tab-sync="pricing-deployment">
+    <div class="{{ $class }}__tabs" data-tab-sync="pricing-deployment" data-tab-sync-direction="down-only">
       {{ range .context.Params.tabs }}
         <button class="{{ $class }}__tab{{ if .active }}{{ " " }}{{ $class }}__tab--active{{ end }}" data-tab="{{ .id }}">
           {{ .label }}