diff --git a/tests/visual/accordion/default_9264.html b/tests/visual/accordion/default_9264.html new file mode 100644 index 00000000000..28dcf24f484 --- /dev/null +++ b/tests/visual/accordion/default_9264.html @@ -0,0 +1,102 @@ + + + + + jQuery UI Accordion - Default functionality + + + + + + + + + + + + +
+ This is a copy of demos/accordion/default.html, modified to constrain the width of the accordion. This was done to mimic the conditions outlined in http://bugs.jqueryui.com/ticket/9264 +
+ +
+
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+
+

+Click headers to expand/collapse content that is broken into logical sections, much like tabs. +Optionally, toggle sections open/closed on mouseover. +

+

+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is +usable without JavaScript. +

+
+ + diff --git a/ui/accordion.js b/ui/accordion.js index 1f41266d7ce..dbed63f31a1 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -365,10 +365,14 @@ return $.widget( "ui.accordion", { } else if ( heightStyle === "auto" ) { maxHeight = 0; this.headers.next() + .show() .each(function() { maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); }) - .height( maxHeight ); + .height( maxHeight ) + .not( this.active.next() ) + .css( "display", "" ) + .hide(); } }, @@ -559,11 +563,24 @@ return $.widget( "ui.accordion", { complete: complete, step: function( now, fx ) { fx.now = Math.round( now ); - if ( fx.prop !== "height" ) { - adjust += fx.now; - } else if ( that.options.heightStyle !== "content" ) { - fx.now = Math.round( total - toHide.outerHeight() - adjust ); - adjust = 0; + if ( !fx.adjustInit ) { + if ( fx.prop !== "height" ) { + adjust += fx.now; + // padding-box: exclude padding + } else if ( that.options.heightStyle !== "content" && + toHide.css( "box-sizing" ) === "padding-box" ) { + // per conversation with @scottgonzalez and @mikesherov + // let's just handle border-box and content-box. + // border-box: exclude all props + } else if ( that.options.heightStyle !== "content" && + toHide.css( "box-sizing" ) === "border-box" ) { + fx.now = Math.round( total - toHide.outerHeight() ); + // content-box: include all props + } else if ( that.options.heightStyle !== "content" ) { + fx.now = Math.round( total - toHide.outerHeight() - adjust); + adjust = 0; + } + fx.adjustInit = true; } } });