Update templates/menu.html

templates/menu.html

@@ -537,7 +537,8 @@ input:checked + .slider:before {
             <div class="row">
                 {% for item in items %}
                     <div class="col-md-6 mb-4">
-                        <div class="card menu-card">
+                        <div class="card menu-card" data-category="veg"> <!-- Category set as "Veg" -->
+                           <div class="card menu-card" data-category="Non-Veg">  <!-- Category set as "Non-Veg" -->
                             <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
                             <div class="card-body">
                                 <h5 class="card-title">{{ item.Name }}</h5>
@@ -849,26 +850,23 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
   
-
 // Function to toggle Veg/Non-Veg items
 function toggleVegItems() {
     const isVegOnly = document.getElementById('vegToggle').checked;
-    
-    // Get the containers for all items and veg items
     const allItemsContainer = document.getElementById('allItemsContainer');
     const vegItemsContainer = document.getElementById('vegItemsContainer');
     const menuTitle = document.getElementById('menuTitle');
     
-    // Assuming you have an array of menu items or you are rendering them dynamically
-    const menuItems = [...allItemsContainer.querySelectorAll('.menu-card')]; // Get all menu items
-
+    // Get all menu items
+    const menuItems = [...allItemsContainer.querySelectorAll('.menu-card')]; // Get all menu cards
+    
     if (isVegOnly) {
         // Show only Veg items
         vegItemsContainer.style.display = 'block';
         allItemsContainer.style.display = 'none';
         menuTitle.style.display = 'none';  // Hide the "Menu" title
 
-        // Hide non-veg items
+        // Hide Non-Veg items
         menuItems.forEach(item => {
             const isVeg = item.getAttribute('data-category') === 'Veg'; // Check if the item is 'Veg'
             item.style.display = isVeg ? 'block' : 'none'; // Show Veg items, hide others