48e64c1e21d90b822aef8b11a2eabfb44321dd50
jnavarr5
  Wed Dec 3 16:34:13 2025 -0800
Updating the toggleSelects function to accept a DOM element. Disabling buttons so you aren't taken away from the tutorial by clicking the button it is explaining, refs #34354

diff --git src/hg/js/tutorials/customTrackTutorial.js src/hg/js/tutorials/customTrackTutorial.js
index 7f3d534727a..1c78a8887fe 100644
--- src/hg/js/tutorials/customTrackTutorial.js
+++ src/hg/js/tutorials/customTrackTutorial.js
@@ -224,38 +224,41 @@
               // Click the submit button
               const submitButton = document.getElementById('Submit');
               submitButton.click();
             }
         },
         'end': {
             action() {
                 hideMenu('#help > ul');
                 return this.complete();
             },
             //classes: 'shepherd-button-secondary',
             text: 'Finish'
         }
     };
     // Function to disable drop-downs, button clicks, and text inputs
+    // Now accepts a string or a DOM element.
     function toggleSelects(containerId, enabled) {
-        const container = document.getElementById(containerId);
+        const container = typeof containerId === 'string'
+                          ? document.getElementById(containerId) // If true, 
+                          : containerId; // else assume it is a DOM element
 
         const selectors = ['select', 'button', 'input[type="radio"]',
                            'input[type="submit"]', 'input[type="checkbox"]',
                            'input[type="text"]', 'a'
                           ];
-        container.querySelectorAll(selectors).forEach(sel => {
+        container.querySelectorAll(selectors.join(',')).forEach(sel => {
             if (enabled) {
                 sel.style.pointerEvents = '';
                 sel.style.opacity = '';
                 sel.tabIndex = 0;
             } else {
                 sel.style.pointerEvents = 'none'; // blocks mouse interaction
                 sel.style.opacity = '1';          // keep visual styling normal
                 sel.tabIndex = -1;                // skip from keyboard nav
             }
         });
 
     }
 
     // Function to keep menus visible using a selector
     function keepMenuVisible(selector) {
@@ -405,30 +408,36 @@
                     const isEmpty = textarea.value.trim() === '';
                     
                     // If the textbox is empty, load a BED track
                     if (isEmpty) {
                         textarea.value = 'browser position chr21:33031596-33041570\n';
                         textarea.value += 'track type=bigWig name="bigWig variableStep" '+
                                           'description="bigWig variableStep format" visibility=full '+
                                           'autoScale=off viewLimits=5.0:25.0 color=255,200,0 '+
                                           'yLineMark=11.76 yLineOnOff=on '+
                                           'bigDataUrl="http://genome-test.gi.ucsc.edu/~hiram/ctDb/wigVariableStep.bw"\n';
               
                         // Optional: trigger any change events if the page listens for them
                         textarea.dispatchEvent(new Event('change', { bubbles: true }));
                         textarea.dispatchEvent(new Event('input', { bubbles: true }));
                     }
+                    const submitButton = document.querySelector('input#Submit').parentElement;
+                    toggleSelects(submitButton, false);
+                },
+                hide: function() {
+                    const submitButton = document.querySelector('input#Submit').parentElement;
+                    toggleSelects(submitButton, true);
                 }
             },
             attachTo: 
                 {
                 element: '#Submit',
                 on: 'top'
                 },
             id: 'submit'
         });
     }
 
     function customTrackResultSteps() {
         customTrackTour.addStep({
             title: 'View your uploaded custom tracks',
             text:
@@ -468,31 +477,41 @@
                 show: () => toggleSelects('navForm', false),
                 hide: () => toggleSelects('navForm', true)
             }
         });
 
         customTrackTour.addStep({
             title: 'Add more tracks to the Genome Browser',
             text:
                   'Click this button to return to the previous page to add more custom tracks.',
             buttons: [tutorialButtons.back, tutorialButtons.next],
             attachTo: 
                 {
                 element: '#addTracksButton',
                 on: 'bottom'
                 },
-            id: 'add-tracks'
+            id: 'add-tracks',
+            when: {
+                show: function() {
+                    const submitButton = document.querySelector('input#addTracksButton').parentElement;
+                    toggleSelects(submitButton, false);
+                },
+                hide: function() {
+                    const submitButton = document.querySelector('input#addTracksButton').parentElement;
+                    toggleSelects(submitButton, true);
+                }
+            }
         });
 
         customTrackTour.addStep({
             title: 'Additional resources and documentation',
             text: 'For further examples of using ' +
                   'custom tracks, please read the <a href="/goldenPath/help/customTrack.html" '+
                   'target="_blank">Custom Track user guide</a>. You can find examples of simple '+
                   'annotation files, BED custom tracks with muliple blocks, loading custom tracks '+
                   'via the URL, and more. '+
                   '<br><br>'+
                   'You can also <a href="/contacts.html" target="_blank">contact us</a> if you '+
                   'have any questions or issues uploading a custom track. ',
             attachTo: {
                 element: '#hgCustomHelp',
                 on: 'left-start'