Save

views/dashboardPage/dashboard.css

@@ -163,13 +163,13 @@ body{
     margin-bottom: 100px;
 }
 
-.categoryDiv div:first-of-type{
+.categoryDiv > div:first-of-type{
     display: flex;
     margin-left: 15px;
     width: 100%;
 }
 
-.categoryDiv div:first-of-type p{
+.categoryDiv > div:first-of-type p{
     display: flex;
     align-items: center;
     padding: 20px 0 20px 100px;
@@ -180,13 +180,18 @@ body{
     flex-grow: 1;
 }
 
-.categoryDiv div:first-of-type button{
+.categoryDiv > div:first-of-type button{
     padding: 10px;
     background: rgb(240, 252, 255);
     border: 1px solid black;
     border-radius: 5px;
     width: 75px;
     height: 75px;
+    cursor: pointer;
+}
+
+.ingredientsDiv{
+    flex-direction: column;
 }
 
 .ingredient{

views/dashboardPage/ingredients.js

@@ -18,14 +18,20 @@ window.ingredientsStrandObj = {
                 headerTitle.innerText = category.name;
                 headerDiv.appendChild(headerTitle);
 
+                let ingredientsDiv = document.createElement("div");
+                ingredientsDiv.classList = "ingredientsDiv";
+                ingredientsDiv.style.display = "none";
+                categoryDiv.appendChild(ingredientsDiv);
+
                 let headerButton = document.createElement("button");
-                headerButton.innerText = "^";
+                headerButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+                headerButton.onclick = ()=>{this.toggleCategory(ingredientsDiv, headerButton)};
                 headerDiv.appendChild(headerButton);
 
                 for(let ingredient of category.ingredients){
                     let ingredientDiv = document.createElement("div");
                     ingredientDiv.classList = "ingredient";
-                    categoryDiv.appendChild(ingredientDiv);
+                    ingredientsDiv.appendChild(ingredientDiv);
 
                     let ingredientName = document.createElement("p");
                     ingredientName.innerText = ingredient.name;
@@ -39,6 +45,8 @@ window.ingredientsStrandObj = {
                     ingredientData.innerText = `${ingredient.quantity} ${ingredient.unit}`;
                     ingredientDiv.appendChild(ingredientData);
                 }
+
+                
             }
 
             this.isPopulated = true;
@@ -77,8 +85,16 @@ window.ingredientsStrandObj = {
             }
         }
 
-        console.log(ingredientsByCategory);
-
         return ingredientsByCategory;
+    },
+
+    toggleCategory: function(div, button){
+        if(div.style.display === "none"){
+            button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
+            div.style.display = "flex";
+        }else if(div.style.display === "flex"){
+            button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+            div.style.display = "none";
+        }
     }
 }