From 1d357cf4b4303700144f40f4f7a8b4b415b29c18 Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=B6rn=20Zaefferer?= Date: Fri, 12 Dec 2008 13:58:41 +0000 Subject: [PATCH] Accordion: Fixed jumpy behaviour (#3646) by wrapping content elements in an additional div --- tests/accordion.js | 16 ++++++++-------- ui/ui.accordion.js | 17 ++++++++--------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/tests/accordion.js b/tests/accordion.js index 99a368c37..d9f8c4b64 100644 --- 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 eebf321d0..f2e107939 100644 --- 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("
").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(); } }); -- 2.39.5