From a9565ff6f920ab480a9298c055b8f4581786f3a4 Mon Sep 17 00:00:00 2001
From: Prophet731 <Prophet731@users.noreply.github.com>
Date: Thu, 19 Mar 2026 13:39:02 -0500
Subject: [PATCH] fix: OS gallery accordion auto-collapses other sections when
 one opens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 modules/servers/VirtFusionDirect/hooks.php             | 10 ++++++++--
 .../servers/VirtFusionDirect/templates/js/module.js    | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/modules/servers/VirtFusionDirect/hooks.php b/modules/servers/VirtFusionDirect/hooks.php
index 568ef3f..f28b640 100644
--- a/modules/servers/VirtFusionDirect/hooks.php
+++ b/modules/servers/VirtFusionDirect/hooks.php
@@ -239,8 +239,14 @@ add_hook('ClientAreaFooterOutput', 1, function ($vars) {
 
                 header.addEventListener('click', function() {
                     var isOpen = grid.style.display !== 'none';
-                    grid.style.display = isOpen ? 'none' : '';
-                    arrow.textContent = isOpen ? '\u25B6' : '\u25BC';
+                    // Collapse all
+                    galleryContainer.querySelectorAll('.vf-os-grid').forEach(function(g) { g.style.display = 'none'; });
+                    galleryContainer.querySelectorAll('.vf-os-category-arrow').forEach(function(a) { a.textContent = '\u25B6'; });
+                    // Toggle this one
+                    if (!isOpen) {
+                        grid.style.display = '';
+                        arrow.textContent = '\u25BC';
+                    }
                 });
 
                 cat.templates.forEach(function(tpl) {
diff --git a/modules/servers/VirtFusionDirect/templates/js/module.js b/modules/servers/VirtFusionDirect/templates/js/module.js
index b18dae8..dd5d50f 100644
--- a/modules/servers/VirtFusionDirect/templates/js/module.js
+++ b/modules/servers/VirtFusionDirect/templates/js/module.js
@@ -335,8 +335,14 @@ function vfRenderOsGallery(container, data, hiddenInput) {
 
         header.on("click", function () {
             var isVisible = grid.is(":visible");
-            grid.slideToggle(200);
-            arrow.html(isVisible ? '&#9654;' : '&#9660;');
+            // Collapse all other categories
+            $container.find(".vf-os-grid").slideUp(200);
+            $container.find(".vf-os-category-arrow").html('&#9654;');
+            // Toggle this one
+            if (!isVisible) {
+                grid.slideDown(200);
+                arrow.html('&#9660;');
+            }
         });
 
         $.each(category.templates, function (ti, tpl) {