diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index e2e3e1e886d14..6f98b50f664b2 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -239,7 +239,27 @@ export function updateElementsVisibilityForOptions(
     const codeBlock = openLine.closest('code.code-highlight');
     if (!codeBlock) return;
 
-    const allLines = Array.from(codeBlock.children) as HTMLElement[];
+    // Helper function to get all code lines, including those nested in HighlightBlocks
+    const getAllCodeLines = (container: Element): HTMLElement[] => {
+      const lines: HTMLElement[] = [];
+      Array.from(container.children).forEach(child => {
+        const el = child as HTMLElement;
+        // If it's a highlight-block, get lines from inside it
+        if (el.classList.contains('highlight-block')) {
+          // Lines are nested in highlight-block > div (CodeLinesContainer)
+          const linesContainer = el.querySelector('div');
+          if (linesContainer) {
+            lines.push(...(Array.from(linesContainer.children) as HTMLElement[]));
+          }
+        } else {
+          // Regular line, add it directly
+          lines.push(el);
+        }
+      });
+      return lines;
+    };
+
+    const allLines = getAllCodeLines(codeBlock);
     const openIndex = allLines.indexOf(openLine);
 
     // Find the matching close line in the same code block