diff --git a/templates/index.html b/templates/index.html
index 1af6a1d..e40f1c1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1544,15 +1544,16 @@
 
                 // Display grouped downloads
                 let html = '';
-                groupNames.forEach(groupName => {
+                groupNames.forEach((groupName, index) => {
                     const groupDownloads = groups[groupName];
+                    const groupId = `group-${index}`;
                     html += `
                         <div class="downloads-group">
-                            <div class="downloads-group-header" onclick="toggleGroup(this)">
+                            <div class="downloads-group-header" onclick="toggleGroup('${groupId}')">
                                 <div class="downloads-group-title">${escapeHtml(groupName)}</div>
                                 <div class="downloads-group-count">${groupDownloads.length}</div>
                             </div>
-                            <div class="downloads-group-items">
+                            <div class="downloads-group-items" id="${groupId}">
                                 ${groupDownloads.map(dl => renderDownloadItem(dl)).join('')}
                             </div>
                         </div>
@@ -1644,18 +1645,29 @@
             `;
         }
 
-        function toggleGroup(header) {
-            const items = header.nextElementSibling;
+        function toggleGroup(groupId) {
+            console.log('toggleGroup called with ID:', groupId);
+            const items = document.getElementById(groupId);
+            const header = items.previousElementSibling;
+
+            if (!items || !header) {
+                console.error('Could not find group elements');
+                return;
+            }
+
             const isCollapsed = header.classList.contains('collapsed');
+            console.log('isCollapsed:', isCollapsed);
 
             if (isCollapsed) {
                 // Expand
                 items.style.display = 'flex';
                 header.classList.remove('collapsed');
+                console.log('Expanded group');
             } else {
                 // Collapse
                 items.style.display = 'none';
                 header.classList.add('collapsed');
+                console.log('Collapsed group');
             }
         }