From 8b8d400f544da854e70c0c4eb3290cd401c66a4d Mon Sep 17 00:00:00 2001
From: Brian O Grady <brian@codeinstitute.net>
Date: Fri, 2 Aug 2024 16:24:05 +0200
Subject: [PATCH] fixed easing bug

---
 ...oject-1-Implementati0on-Guide-Dynamic.html | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html b/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html
index ed7eb62..4debb7e 100644
--- a/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html
+++ b/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html
@@ -780,25 +780,38 @@ <h3>Deployment (1 hour)</h3>
     
 
     <script>
-       var acc = document.getElementsByClassName("accordion");
-var i;
-
-for (i = 0; i < acc.length; i++) {
-    acc[i].addEventListener("click", function() {
-        this.classList.toggle("active");
-        var panel = this.nextElementSibling;
-
-        if (panel.style.maxHeight) {
-            panel.style.maxHeight = null;
-            panel.style.padding = "0 18px";
-            panel.style.transition = "max-height 0.2s ease-out, padding 0.2s ease-out";
-        } else {
-            panel.style.maxHeight = panel.scrollHeight + "px";
-            panel.style.padding = "10px 18px";
-            panel.style.transition = "max-height 0.2s ease-in, padding 0.2s ease-in";
+        var acc = document.getElementsByClassName("accordion");
+        var i;
+        
+        for (i = 0; i < acc.length; i++) {
+            acc[i].addEventListener("click", function() {
+                this.classList.toggle("active");
+                var panel = this.nextElementSibling;
+        
+                if (panel.style.maxHeight) {
+                    panel.style.maxHeight = null;
+                    panel.style.padding = "0 18px";
+                } else {
+                    panel.style.maxHeight = panel.scrollHeight + "px";
+                    panel.style.padding = "10px 18px";
+                }
+            });
         }
-    });
-}
+
+        // Adding CSS for smooth transitions
+var css = document.createElement("style");
+css.type = "text/css";
+css.innerHTML = '
+    .panel {
+        transition: max-height 0.2s ease-out, padding 0.2s ease-out;
+        overflow: hidden;
+    }
+    .active + .panel {
+        transition: max-height 0.2s ease-in, padding 0.2s ease-in;
+    }
+';
+document.body.appendChild(css);
+
     </script>
 </body>
 </html>