collapse fix

app.py

@@ -136,7 +136,7 @@ def create_ui():
                 
                 html += f'''
                 <div class="validation-step" id="step-{i}">
-                    <div class="step-header" onclick="document.getElementById('details-{i}').style.display = document.getElementById('details-{i}').style.display === 'none' ? 'block' : 'none'; document.getElementById('arrow-{i}').className = document.getElementById('details-{i}').style.display === 'none' ? 'arrow-indicator' : 'arrow-indicator arrow-down';">
+                    <div class="step-header" onclick="toggleDetails('{i}')">
                         <div class="step-left">
                             <div class="step-status {status_class}">{status_icon}</div>
                             <div class="step-title">{test_name}</div>
@@ -151,6 +151,25 @@ def create_ui():
             
             html += '</div>'
             
+            html += '''
+            <script>
+            function toggleDetails(id) {
+                const details = document.getElementById('details-' + id);
+                const arrow = document.getElementById('arrow-' + id);
+                
+                if (details.style.display === 'none') {
+                    details.style.display = 'block';
+                    arrow.classList.add('arrow-down');
+                } else {
+                    details.style.display = 'none';
+                    arrow.classList.remove('arrow-down');
+                }
+            }
+            </script>
+            '''
+            
+            return gr.update(value=html, visible=True)
+        
         file_input.change(on_file_upload, inputs=file_input, outputs=[upload_progress, validation_results])
         validate_btn.click(on_validate, inputs=file_input, outputs=validation_results)