Accordion: Start the accordion animation before changing classes. Fixes #6720 - Accor...

Thanks Tony Ross.

diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js
index 96a69d4f3c6da5b452064fd6c64bb434cbd32c1b..21e96a3c3337f5f56642a3392187df5530c6d0b8 100644 (file)
--- a/ui/jquery.ui.accordion.js
+++ b/ui/jquery.ui.accordion.js
@@ -347,8 +347,26 @@ $.widget( "ui.accordion", {
                        return;
                }
 
+               // find elements to show and hide
+               var active = this.active,
+                       toShow = clicked.next(),
+                       toHide = this.active.next(),
+                       data = {
+                               options: options,
+                               newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
+                               oldHeader: this.active,
+                               newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
+                               oldContent: toHide
+                       },
+                       down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
+
+               // when the call to ._toggle() comes after the class changes
+               // it causes a very odd bug in IE 8 (see #6720)
+               this.active = clickedIsActive ? $([]) : clicked;
+               this._toggle( toShow, toHide, data, clickedIsActive, down );
+
                // switch classes
-               this.active
+               active
                        .removeClass( "ui-state-active ui-corner-top" )
                        .addClass( "ui-state-default ui-corner-all" )
                        .children( ".ui-icon" )
@@ -366,21 +384,6 @@ $.widget( "ui.accordion", {
                                .addClass( "ui-accordion-content-active" );
                }
 
-               // find elements to show and hide
-               var toShow = clicked.next(),
-                       toHide = this.active.next(),
-                       data = {
-                               options: options,
-                               newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
-                               oldHeader: this.active,
-                               newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
-                               oldContent: toHide
-                       },
-                       down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
-
-               this.active = clickedIsActive ? $([]) : clicked;
-               this._toggle( toShow, toHide, data, clickedIsActive, down );
-
                return;
        },