Accordion: Correct height calculated when closed

Fixes #11938 Closes gh-1536 Closes gh-1616
jquery · Feb 9, 2016 · c87653b · c87653b
1 parent 2bc8461
commit c87653b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html
@@ -8,12 +8,16 @@
 	<script src="../../lib/css.js" data-modules="core accordion"></script>
 	<script src="../../lib/bootstrap.js" data-widget="accordion"></script>
 	<style>
-	#list, #list1 *, #navigation, #navigation * {
+	#list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
 		margin: 0;
 		padding: 0;
 		font-size: 12px;
 		line-height: 15px;
 	}
+	#collapsibleWrapper {
+		width: 300px;
+		float: left;
+	}
 	</style>
 </head>
 <body>
@@ -109,6 +113,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/options.js b/tests/unit/accordion/options.js
@@ -48,6 +48,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/widgets/accordion.js b/ui/widgets/accordion.js
@@ -373,7 +373,14 @@ return $.widget( "ui.accordion", {
 			maxHeight = 0;
 			this.headers.next()
 				.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 );
 		}