fix content toggle not working properly

DotCamp · Jun 15, 2024 · 3f0462a · 3f0462a
1 parent 8bf9b9d
commit 3f0462a
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 32 deletions.
diff --git a/dist/blocks.build.js.map b/dist/blocks.build.js.map
diff --git a/dist/blocks.style.build.css b/dist/blocks.style.build.css
diff --git a/readme.txt b/readme.txt
@@ -153,6 +153,7 @@ That's it. You're done!
 = 3.2.0 =
 
 * FIX: Aspect Ratio not working on uploaded video in advanced video block.
+* FIX: Content Toggle not working properly.
 
 = 3.1.9 =
 

diff --git a/src/blocks/content-toggle/front.build.js b/src/blocks/content-toggle/front.build.js
@@ -67,6 +67,16 @@ var togglePanel = function togglePanel(target) {
       panelContent.style.height = "";
     }
   }, 20);
+  panelContent.addEventListener("transitionend", function () {
+    panelContent.classList.remove("ub-toggle-transition");
+    panelContent.setAttribute("aria-expanded", panelContent.offsetHeight !== 0);
+    if (panelContent.offsetHeight === 0) {
+      panelContent.classList.add("ub-hide");
+    } else {
+      panelContent.removeAttribute("style");
+    }
+    panelContent.classList.remove("ub-hiding");
+  });
   panelContent.querySelectorAll(".wp-block-embed iframe").forEach(function (embeddedContent) {
     embeddedContent.style.removeProperty("width");
     embeddedContent.style.removeProperty("height");
@@ -113,17 +123,6 @@ var attachTogglePanelEvents = function attachTogglePanelEvents() {
           e.stopImmediatePropagation();
           togglePanel(instance);
         });
-        panelContent.addEventListener("transitionend", function () {
-          panelContent.classList.remove("ub-toggle-transition");
-          panelContent.setAttribute("aria-expanded", panelContent.offsetHeight !== 0);
-          if (panelContent.offsetHeight === 0) {
-            panelContent.classList.add("ub-hide");
-          } else {
-            panelContent.removeAttribute("style");
-          }
-          panelContent.classList.remove("ub-hiding");
-        });
-        panelContent.removeAttribute("style");
       });
       if (parentIsHidden) {
         toggleContainer.parentElement.style.display = "none";

diff --git a/src/blocks/content-toggle/front.js b/src/blocks/content-toggle/front.js
@@ -89,6 +89,19 @@ const togglePanel = (target) => {
 		}
 	}, 20);
 
+	panelContent.addEventListener("transitionend", () => {
+		panelContent.classList.remove("ub-toggle-transition");
+		panelContent.setAttribute("aria-expanded", panelContent.offsetHeight !== 0);
+
+		if (panelContent.offsetHeight === 0) {
+			panelContent.classList.add("ub-hide");
+		} else {
+			panelContent.removeAttribute("style");
+		}
+
+		panelContent.classList.remove("ub-hiding");
+	});
+
 	panelContent
 		.querySelectorAll(".wp-block-embed iframe")
 		.forEach((embeddedContent) => {
@@ -168,24 +181,6 @@ const attachTogglePanelEvents = () => {
 							e.stopImmediatePropagation();
 							togglePanel(instance);
 						});
-
-						panelContent.addEventListener("transitionend", () => {
-							panelContent.classList.remove("ub-toggle-transition");
-							panelContent.setAttribute(
-								"aria-expanded",
-								panelContent.offsetHeight !== 0,
-							);
-
-							if (panelContent.offsetHeight === 0) {
-								panelContent.classList.add("ub-hide");
-							} else {
-								panelContent.removeAttribute("style");
-							}
-
-							panelContent.classList.remove("ub-hiding");
-						});
-
-						panelContent.removeAttribute("style");
 					});
 
 				if (parentIsHidden) {

diff --git a/src/blocks/content-toggle/style.css b/src/blocks/content-toggle/style.css
diff --git a/src/blocks/content-toggle/style.scss b/src/blocks/content-toggle/style.scss
@@ -11,6 +11,10 @@
 }
 
 .wp-block-ub-content-toggle-accordion {
+	.ub-content-initialized {
+		opacity: 0;
+		position: absolute;
+	}
 	position: relative;
 	border: 1px solid lightsalmon;
 	margin-bottom: 10px;