Update templates/combined_summary.html

templates/combined_summary.html

@@ -238,6 +238,7 @@
 
 
 
+
     </div>
 
     <script>
@@ -263,17 +264,20 @@
         const ingredients = {{ order_items|tojson }}; // Make sure this is passed from the backend
         
         // Function to toggle the visibility of the ingredients section
+// Function to toggle the visibility of the ingredients section and change the button text
 function toggleIngredients(index) {
     const ingredientsSection = document.getElementById('ingredientsSection' + index);
-    const showButton = document.querySelector(`#ingredientsSection${index} ~ button:first-child`); // Show Ingredients button
-    const hideButton = document.getElementById('hideIngredients' + index); // Hide Ingredients button
+    const button = document.getElementById('ingredientsToggleButton' + index); // Get the button dynamically
 
     // Toggle the visibility of the ingredients section
     ingredientsSection.classList.toggle('hidden');
 
-    // Toggle the visibility of the buttons
-    showButton.classList.toggle('hidden');
-    hideButton.classList.toggle('hidden');
+    // Change the button text based on the current state
+    if (ingredientsSection.classList.contains('hidden')) {
+        button.textContent = 'Show Ingredients';  // If hidden, show the "Show Ingredients" text
+    } else {
+        button.textContent = 'Hide Ingredients';  // If visible, show the "Hide Ingredients" text
+    }
 }
 
 // Function to show ingredient details in the modal