From 3b3be684e8902e4e36d93f0bfcf89119a40f4d4a Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Tue, 11 Nov 2014 22:36:51 +0000
Subject: [PATCH] Customizer: Use `jQuery.fn.toggle()` instead of
 `slideUp`/`slideDown` if panel/section/control is not inserted into DOM yet.

jQuery does nothing when calling `slideUp` on elements that are not inserted into the DOM yet, which can now be the case now when first loading the Customizer as the panels, sections and controls get dynamically inserted, see #28709.

props westonruter.
fixes #30251.

git-svn-id: https://develop.svn.wordpress.org/trunk@30307 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-controls.js | 18 +++++++++++++-----
 src/wp-admin/js/customize-widgets.js  |  3 ++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 83ac3f5669..4cee2d7f5f 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -131,8 +131,8 @@
 	 * @augments wp.customize.Class
 	 */
 	Container = api.Class.extend({
-		defaultActiveArguments: { duration: 'fast' },
-		defaultExpandedArguments: { duration: 'fast' },
+		defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
+		defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
 
 		initialize: function ( id, options ) {
 			var container = this;
@@ -217,7 +217,11 @@
 		 */
 		onChangeActive: function ( active, args ) {
 			var duration = ( 'resolved' === api.previewer.deferred.active.state() ? args.duration : 0 );
-			if ( active ) {
+			if ( ! $.contains( document, this.container ) ) {
+				// jQuery.fn.slideUp is not hiding an element if it is not in the DOM
+				this.container.toggle( active );
+				args.completeCallback();
+			} else if ( active ) {
 				this.container.stop( true, true ).slideDown( duration, args.completeCallback );
 			} else {
 				this.container.stop( true, true ).slideUp( duration, args.completeCallback );
@@ -640,7 +644,7 @@
 	 * @augments wp.customize.Class
 	 */
 	api.Control = api.Class.extend({
-		defaultActiveArguments: { duration: 'fast' },
+		defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
 
 		initialize: function( id, options ) {
 			var control = this,
@@ -781,7 +785,11 @@
 		 * @param {Object} args  merged on top of this.defaultActiveArguments
 		 */
 		onChangeActive: function ( active, args ) {
-			if ( active ) {
+			if ( ! $.contains( document, this.container ) ) {
+				// jQuery.fn.slideUp is not hiding an element if it is not in the DOM
+				this.container.toggle( active );
+				args.completeCallback();
+			} else if ( active ) {
 				this.container.slideDown( args.duration, args.completeCallback );
 			} else {
 				this.container.slideUp( args.duration, args.completeCallback );
diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index 3338f7bc08..eac16a559b 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/wp-admin/js/customize-widgets.js
@@ -405,7 +405,8 @@
 	 */
 	api.Widgets.WidgetControl = api.Control.extend({
 		defaultExpandedArguments: {
-			duration: 'fast'
+			duration: 'fast',
+			completeCallback: $.noop
 		},
 
 		initialize: function ( id, options ) {