jquery · JacquesPerrault · Jul 15, 2014 · Jul 17, 2014 · Jul 22, 2014 · Jul 22, 2014
diff --git a/tests/visual/accordion/default_9264.html b/tests/visual/accordion/default_9264.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../../external/jquery/jquery.js"></script>
+	<script src="../../../ui/core.js"></script>
+	<script src="../../../ui/widget.js"></script>
+	<script src="../../../ui/accordion.js"></script>
+	<link rel="stylesheet" href="../../../themes/base/all.css">
+	<script>
+	$(function() {
+		$('#accordion').accordion({
+		    heightStyle: 'auto'
+		});
+	});
+	</script>
+
+	<style type='text/css'>
+		    /*
+		These are only problems with the heightStyle: 'auto' setting on an accordion. If you change it to
+		heightStyle: 'content', the problems go away.
+		*/
+
+		/* this causes the height of each accordion tab to be miscalculated */
+		.wrapperAccordion {
+		    width: 300px
+		}
+		/* this causes a nasty "snap" when an accordion tab is shown */
+		* {
+		    -moz-box-sizing: border-box;
+		    -webkit-box-sizing: border-box;
+		    box-sizing: border-box;
+		}
+	</style>
+
+</head>
+<body>
+<div>
+	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 <a href="http://bugs.jqueryui.com/ticket/9264" target="_blank">http://bugs.jqueryui.com/ticket/9264</a>
+</div>
+
+<div class='wrapperAccordion'>
+	<div id="accordion">
+		<h3>Section 1</h3>
+		<div>
+			<p>
+			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+			</p>
+		</div>
+		<h3>Section 2</h3>
+		<div>
+			<p>
+			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.
+			</p>
+		</div>
+		<h3>Section 3</h3>
+		<div>
+			<p>
+			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.
+			</p>
+			<ul>
+				<li>List item one</li>
+				<li>List item two</li>
+				<li>List item three</li>
+			</ul>
+		</div>
+		<h3>Section 4</h3>
+		<div>
+			<p>
+			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.
+			</p>
+			<p>
+			Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+			inceptos himenaeos.
+			</p>
+		</div>
+	</div>
+</div>
+<div class="demo-description">
+<p>
+Click headers to expand/collapse content that is broken into logical sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+</p>
+<p>
+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
+usable without JavaScript.
+</p>
+</div>
+</body>
+</html>
diff --git 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;
 					}
 				}
 			});