Accordion: Stop current hide animation, jump to last animation and calculate percentages for padding in addition to height. Fixes #3532 - Accordion: Activating a panel during animation fails

ui/jquery.ui.accordion.js

@@ -12,6 +12,8 @@
  *	jquery.ui.widget.js
  */
 (function( $, undefined ) {
+		  
+var lastToggle = {};
 
 // TODO: use ui-accordion-header-active class and fix styling
 $.widget( "ui.accordion", {
@@ -37,8 +39,6 @@ $.widget( "ui.accordion", {
 		var self = this,
 			options = self.options;
 
-		self.running = false;
-
 		self.element.addClass( "ui-accordion ui-widget ui-helper-reset" );
 
 		self.headers = self.element.find( options.header )
@@ -319,8 +319,6 @@ $.widget( "ui.accordion", {
 		event.preventDefault();
 
 		if ( options.disabled ||
-				// can't switch during an animation
-				this.running ||
 				// click on active header, but not collapsible
 				( clickedIsActive && !options.collapsible ) ||
 				// allow canceling activation
@@ -361,7 +359,6 @@ $.widget( "ui.accordion", {
 			toShow = data.newContent,
 			toHide = data.oldContent;
 
-		self.running = true;
 		function complete() {
 			self._completed( data );
 		}
@@ -382,6 +379,8 @@ $.widget( "ui.accordion", {
 			animations[ animation ]({
 				toShow: toShow,
 				toHide: toHide,
+				prevShow: lastToggle.toShow,
+				prevHide: lastToggle.toHide,
 				complete: complete,
 				down: toShow.length && ( !toHide.length || ( toShow.index() < toHide.index() ) )
 			}, additional );
@@ -412,8 +411,6 @@ $.widget( "ui.accordion", {
 		var toShow = data.newContent,
 			toHide = data.oldContent;
 
-		this.running = false;
-
 		if ( this.options.heightStyle === "content" ) {
 			toShow.add( toHide ).css({
 				height: "",
@@ -435,6 +432,11 @@ $.widget( "ui.accordion", {
 $.extend( $.ui.accordion, {
 	animations: {
 		slide: function( options, additions ) {
+			if ( options.prevShow || options.prevHide ) {
+				options.prevHide.stop( true, true );
+				options.toHide = options.prevShow;
+			}
+			
 			var showOverflow = options.toShow.css( "overflow" ),
 				hideOverflow = options.toHide.css( "overflow" ),
 				percentDone = 0,
@@ -446,6 +448,9 @@ $.extend( $.ui.accordion, {
 				easing: "swing",
 				duration: 300
 			}, options, additions );
+			
+			lastToggle = options;
+
 			if ( !options.toHide.size() ) {
 				originalWidth = options.toShow[0].style.width;
 				options.toShow
@@ -502,10 +507,7 @@ $.extend( $.ui.accordion, {
 				.filter( ":visible" )
 				.animate( hideProps, {
 				step: function( now, settings ) {
-					// only calculate the percent when animating height
+					if ( settings.prop == "height" || settings.prop == "paddingTop" || settings.prop == "paddingBottom" ) {
-					// IE gets very inconsistent results when animating elements
-					// with small values, which is common for padding
-					if ( settings.prop == "height" ) {
 						percentDone = ( settings.end - settings.start === 0 ) ? 0 :
 							( settings.now - settings.start ) / ( settings.end - settings.start );
 					}