Update templates/menu.html

templates/menu.html

@@ -1136,8 +1136,6 @@
                 });
             });
 
-            // Removed static details population since we're using Salesforce data directly
-
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {
@@ -1173,15 +1171,37 @@
             });
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
+
+            // Updated toggle logic for single active details section
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
                     const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
                     const detailsDiv = document.getElementById(`details-${itemName}`);
-                    detailsDiv.classList.toggle('show');
-                    this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                    const isCurrentlyShown = detailsDiv.classList.contains('show');
+
+                    // Close all other details sections
+                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
+                        if (otherDetails !== detailsDiv) {
+                            otherDetails.classList.remove('show');
+                            const otherLink = otherDetails.previousElementSibling;
+                            if (otherLink && otherLink.classList.contains('toggle-details')) {
+                                otherLink.innerText = 'Show Details';
+                            }
+                        }
+                    });
+
+                    // Toggle the current details section
+                    if (!isCurrentlyShown) {
+                        detailsDiv.classList.add('show');
+                        this.innerText = 'Hide Details';
+                    } else {
+                        detailsDiv.classList.remove('show');
+                        this.innerText = 'Show Details';
+                    }
                 });
             });
+
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');