Accordion: Correct height calculated when closed

apushak · scottgonzalez · commit 00e5e146b267 · 2016-06-09T17:38:09.000-04:00
Fixes #11938 Closes gh-1536 Closes gh-1616 (cherry picked from commit c87653b)
diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html
@@ -29,7 +29,7 @@
 
 	<script src="../swarminject.js"></script>
 	<style>
-	#list, #list1 *, #navigation, #navigation * {
+	#list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
 		margin: 0;
 		padding: 0;
 		font-size: 12px;
@@ -39,6 +39,10 @@
 	#list1 > div {
 		overflow: visible;
 	}
+	#collapsibleWrapper {
+		width: 300px;
+		float: left;
+	}
 	</style>
 </head>
 <body>
@@ -134,6 +138,19 @@ <h2><a href="?p=1.1.3">Drums</a></h2>
 	</dd>
 </dl>
 
+<div id="collapsibleWrapper">
+	<div id="collapsible">
+		<h3>Header</h3>
+		<div>
+			<p>
+				The calculated height of this accordion should be the same
+				regardless of whether the accordion was collapsed or not
+				when the height was calculated.
+			</p>
+		</div>
+	</div>
+</div>
+
 </div>
 </body>
 </html>
diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js
@@ -44,6 +44,22 @@ test( "{ active: false }", function() {
 	strictEqual( element.accordion( "option", "active" ), 0 );
 });
 
+// http://bugs.jqueryui.com/ticket/11938
+test( "{ active: false, collapsible: true }", function() {
+	expect( 1 );
+	var element = $( "#collapsible" ).accordion(),
+		height = element.outerHeight();
+
+	element
+		.accordion( "destroy" )
+		.accordion( {
+			active: false,
+			collapsible: true
+		} )
+		.accordion( "option", "active", 0 );
+	equal( element.outerHeight(), height );
+} );
+
 test( "{ active: Number }", function() {
 	expect( 8 );
 	var element = $( "#list1" ).accordion({
diff --git a/ui/accordion.js b/ui/accordion.js
@@ -360,9 +360,16 @@ return $.widget( "ui.accordion", {
 		} else if ( heightStyle === "auto" ) {
 			maxHeight = 0;
 			this.headers.next()
-				.each(function() {
+				.each( function() {
+					var isVisible = $( this ).is( ":visible" );
+					if ( !isVisible ) {
+						$( this ).show();
+					}
 					maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
-				})
+					if ( !isVisible ) {
+						$( this ).hide();
+					}
+				} )
 				.height( maxHeight );
 		}
 	},
