Fix for #4222

Author: jzaefferer

demos/accordion/custom-icons.html

@@ -9,11 +9,17 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
+		var icons = {
+			header: "ui-icon-circle-arrow-e",
+			headerSelected: "ui-icon-circle-arrow-s"
+		};
 		$("#accordion").accordion({
-			icons: {
-    			header: "ui-icon-circle-arrow-e",
-   				headerSelected: "ui-icon-circle-arrow-s"
-			}
+			icons: icons
+		});
+		$("#toggle").toggle(function() {
+			$("#accordion").accordion("option", "icons", false);
+		}, function() {
+			$("#accordion").accordion("option", "icons", icons);
 		});
 	});
 	</script>
@@ -46,6 +52,8 @@ <h3><a href="#">Section 4</a></h3>
 	</div>
 </div>
 
+<button id="toggle">Toggle icons</button>
+
 </div><!-- End demo -->
 
 

tests/unit/accordion/accordion_options.js

@@ -119,6 +119,23 @@ test("{ icons: { 'header': 'ui-icon-foo', 'headerSelected': 'ui-icon-bar' } }",
 	ok(false, 'missing test - untested code is broken code');
 });
 
+test("{ icons: false }", function() {
+	function icons(on) {
+		same($("#list1 span.ui-icon:visible").length, on ? 3 : 0);
+		same( $("#list1").hasClass("ui-accordion-icons"), on );
+	}
+	$("#list1").accordion();
+	icons(true);
+	$("#list1").accordion("destroy").accordion({
+		icons: false
+	});
+	icons(false);
+	$("#list1").accordion("option", "icons", $.ui.accordion.defaults.icons);
+	icons(true);
+	$("#list1").accordion("option", "icons", false);
+	icons(false);
+});
+
 test("{ navigation: false }, default", function() {
 	ok(false, 'missing test - untested code is broken code');
 });

themes/base/ui.accordion.css

@@ -3,7 +3,8 @@
 .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
 .ui-accordion .ui-accordion-li-fix { display: inline; }
 .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
-.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
 .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
 .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
 .ui-accordion .ui-accordion-content-active { display: block; }

ui/ui.accordion.js

@@ -60,8 +60,7 @@ $.widget("ui.accordion", {
 		this.active.next().addClass('ui-accordion-content-active');
 
 		//Append icon elements
-		$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
-		this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
+		this._createIcons();
 
 		// IE7-/Win - Extra vertical space in lists fixed
 		if ($.browser.msie) {
@@ -104,6 +103,20 @@ $.widget("ui.accordion", {
 		}
 
 	},
+	
+	_createIcons: function() {
+		var o = this.options;
+		if (o.icons) {
+			$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
+			this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
+			this.element.addClass("ui-accordion-icons");
+		}
+	},
+	
+	_destroyIcons: function() {
+		this.headers.children(".ui-icon").remove();
+		this.element.removeClass("ui-accordion-icons");
+	},
 
 	destroy: function() {
 		var o = this.options;
@@ -120,7 +133,7 @@ $.widget("ui.accordion", {
 			.removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
 
 		this.headers.find("a").removeAttr("tabindex");
-		this.headers.children(".ui-icon").remove();
+		this._destroyIcons();
 		var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
 		if (o.autoHeight || o.fillHeight) {
 			contents.css("height", "");
@@ -130,8 +143,18 @@ $.widget("ui.accordion", {
 	},
 
 	_setData: function(key, value) {
-		if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
-		$.widget.prototype._setData.apply(this, arguments);	
+		// alwaysOpen is deprecated
+		if(key == 'alwaysOpen'){ key = 'collapsible'; value = !value; }
+		
+		$.widget.prototype._setData.apply(this, arguments);
+			
+		if (key == "icons") {
+			this._destroyIcons();
+			if (value) {
+				this._createIcons();
+			}
+		}
+		
 	},
 
 	_keydown: function(event) {