Accordion: API Redesign. Made style changes and changed 'fill' implementation to use $.siblings()

2 files changed, 36 insertions, 22 deletions

diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js
index b806a4513..2544ec67d 100644
--- a/tests/unit/accordion/accordion_options.js
+++ b/tests/unit/accordion/accordion_options.js
@@ -129,6 +129,15 @@ test("{ fillSpace: true } with sibling", function() {
 	equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332);
 });
 
+test("{ fillSpace: true } with multiple siblings", function() {
+	$("#navigationWrapper").height(500);
+	var sibling = $("<p>Lorem Ipsum</p>");
+	$("#navigationWrapper").prepend( sibling.height(100) );
+	$("#navigationWrapper").prepend( sibling.clone().height(50) );
+	//sibling.outerHeight(true) == 126
+	equalHeights($('#navigation').accordion({ fillSpace: true}), 244, 256);
+});
+
 test("{ header: '> li > :first-child,> :not(li):even' }, default", function() {
 	state($("#list1").accordion(), 1, 0, 0);
 	state($("#navigation").accordion(), 1, 0, 0);
diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js
index 3abb088d1..ccad15262 100644
--- a/ui/jquery.ui.accordion.js
+++ b/ui/jquery.ui.accordion.js
@@ -17,11 +17,11 @@ $.widget( "ui.accordion", {
 	options: {
 		active: 0,
 		animated: "slide",
-		autoHeight: true,
-		clearStyle: false,
+		autoHeight: true, //DEPRECATED - use heightStyle: "auto"
+		clearStyle: false, //DEPRECATED - use heightStyle: "content"
 		collapsible: false,
 		event: "click",
-		fillSpace: false,
+		fillSpace: false, //DEPRECATED - use heightStyle: "fill"
 		//heightStyle: "auto",
 		header: "> li > :first-child,> :not(li):even",
 		icons: {
@@ -30,19 +30,6 @@ $.widget( "ui.accordion", {
 		}
 	},
 
-	_mergeHeightStyle: function() {
-		options = this.options;
-
-		if (options.fillSpace)
-			return "fill";
-
-		if (options.clearStyle)
-			return "content";
-
-		if (options.autoHeight) 
-			return "auto";
-	},
-
 	_create: function() {
 		var self = this,
 			options = self.options;
@@ -182,13 +169,29 @@ $.widget( "ui.accordion", {
 			.css( "display", "" )
 			.removeAttr( "role" )
 			.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
-		if ( options.heightStyle != "content" ) {
+		if ( options.heightStyle !== "content" ) {
 			contents.css( "height", "" );
 		}
 
 		return $.Widget.prototype.destroy.call( this );
 	},
 
+	_mergeHeightStyle: function() {
+		var options = this.options;
+
+		if ( options.fillSpace ) {
+			return "fill";
+		}
+
+		if ( options.clearStyle ) {
+			return "content";
+		}
+
+		if ( options.autoHeight ) {
+			return "auto";
+		}
+	},
+
 	_setOption: function( key, value ) {
 		$.Widget.prototype._setOption.apply( this, arguments );
 			
@@ -249,13 +252,15 @@ $.widget( "ui.accordion", {
 		var options = this.options,
 			maxHeight;
 
-		if ( options.heightStyle == "fill" ) {
+		if ( options.heightStyle === "fill" ) {
 			if ( $.browser.msie ) {
 				var defOverflow = this.element.parent().css( "overflow" );
 				this.element.parent().css( "overflow", "hidden");
 			}
-			parent = this.element.parent();			
-			maxHeight = parent.height() - parent.children(':visible').not(this.element).outerHeight(true);
+			maxHeight = this.element.parent().height();
+			this.element.siblings( ":visible" ).each(function() {
+				maxHeight -= $( this ).outerHeight( true );	
+			});
 			if ($.browser.msie) {
 				this.element.parent().css( "overflow", defOverflow );
 			}
@@ -270,7 +275,7 @@ $.widget( "ui.accordion", {
 						$( this ).innerHeight() + $( this ).height() ) );
 				})
 				.css( "overflow", "auto" );
-		} else if ( options.heightStyle == "auto" ) {
+		} else if ( options.heightStyle === "auto" ) {
 			maxHeight = 0;
 			this.headers.next()
 				.each(function() {
@@ -493,7 +498,7 @@ $.widget( "ui.accordion", {
 			return;
 		}
 
-		if ( this.options.heightStyle == "content" ) {
+		if ( this.options.heightStyle === "content" ) {
 			this.toShow.add( this.toHide ).css({
 				height: "",
 				overflow: ""