fixed easing bug

Code-Institute-Org · Aug 2, 2024 · 8b8d400 · 8b8d400
1 parent 6ef6b0f
commit 8b8d400
Showing 1 changed file with 31 additions and 18 deletions.
diff --git 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>