Accordion: Fixed jumpy behaviour (#3646) by wrapping content elements in an additiona...

diff --git a/tests/accordion.js b/tests/accordion.js
index 99a368c3763cffc8491ee134f5244486f0fff0dd..d9f8c4b64b5c73459e5a9cf3a4cd12670ce890f4 100644 (file)
--- a/tests/accordion.js
+++ b/tests/accordion.js
@@ -10,7 +10,7 @@ jQuery.ui.accordion.defaults.animated = false;
 function state(accordion) {
        var args = $.makeArray(arguments).slice(1);
        $.each(args, function(i, n) {
-               equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n);
+               equals(accordion.find(".ui-accordion-content").parent().eq(i).is(":visible"), n);
        });
 }
 
@@ -24,13 +24,13 @@ test("basics", function() {
 
 test("autoheight", function() {
        $('#navigation').accordion({ autoHeight: false });
-       equals( 90, $('#navigation ul:first').height() );
-       equals( 126, $('#navigation ul:eq(1)').height() );
-       equals( 54, $('#navigation ul:last').height() );
+       equals( 90, $('#navigation div:first').height() );
+       equals( 126, $('#navigation div:eq(1)').height() );
+       equals( 54, $('#navigation div:last').height() );
        $('#navigation').accordion("destroy").accordion({ autoHeight: true });
-       equals( 126, $('#navigation ul:first').height() );
-       equals( 126, $('#navigation ul:eq(1)').height() );
-       equals( 126, $('#navigation ul:last').height() );
+       equals( 126, $('#navigation div:first').height() );
+       equals( 126, $('#navigation div:eq(1)').height() );
+       equals( 126, $('#navigation div:last').height() );
 });
 
 test("activate, numeric", function() {
@@ -89,7 +89,7 @@ test("activate, jQuery or DOM element", function() {
 function state2(accordion) {
        var args = $.makeArray(arguments).slice(1);
        $.each(args, function(i, n) {
-               equals(accordion.find("ul").eq(i).is(":visible"), n);
+               equals(accordion.find("div").eq(i).is(":visible"), n);
        });
 }
 

diff --git a/ui/ui.accordion.js b/ui/ui.accordion.js
index eebf321d0f7cfb4301d304f0f6b9ccd45ef0549f..f2e1079392e1ef556136ea4cc1735d33ec1ae10b 100644 (file)
--- a/ui/ui.accordion.js
+++ b/ui/ui.accordion.js
@@ -32,7 +32,8 @@ $.widget("ui.accordion", {
                this.element.addClass("ui-accordion ui-widget ui-helper-reset");
                var groups = this.element.children().addClass("ui-accordion-group");
                var headers = options.headers = groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all");
-               headers.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
+               // wrap content elements in div against animation issues
+               headers.next().wrap("<div/>").addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
                
                var active = options.active = findActive(headers, options.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
                active.parent().addClass("selected");
@@ -102,9 +103,10 @@ $.widget("ui.accordion", {
                var headers = this.options.headers.removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
                        .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
                headers.find("a").removeAttr("tabindex");
-               headers.next().removeClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
-                       .removeAttr("role").css({display: "", height: "", overflow: "", marginTop:"", marginBottom:""});
                headers.children(".ui-icon").remove();
+               headers.next().children().removeClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").each(function(){
+                       $(this).parent().replaceWith(this);
+               })
        },
 
        _keydown: function(event) {
@@ -355,11 +357,8 @@ $.extend($.ui.accordion, {
                        var hideHeight = options.toHide.height(),
                                showHeight = options.toShow.height(),
                                difference = showHeight / hideHeight,
-                               padding = options.toShow.outerHeight() - options.toShow.height(),
-                               margin = options.toShow.css('marginBottom'),
-                               overflow = options.toShow.css('overflow')
-                               tmargin = options.toShow.css('marginTop');
-                       options.toShow.css({ height: 0, overflow: 'hidden', marginTop: 0, marginBottom: -padding }).show();
+                               overflow = options.toShow.css('overflow');
+                       options.toShow.css({ height: 0, overflow: 'hidden' }).show();
                        options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
                                step: function(now) {
                                        var current = (hideHeight - now) * difference;
@@ -374,7 +373,7 @@ $.extend($.ui.accordion, {
                                        if ( !options.autoHeight ) {
                                                options.toShow.css("height", "auto");
                                        }
-                                       options.toShow.css({marginTop: tmargin, marginBottom: margin, overflow: overflow});
+                                       options.toShow.css({overflow: overflow});
                                        options.complete();
                                }
                        });