Index: tests/accordion.html
===================================================================
--- tests/accordion.html	(revision 1063)
+++ tests/accordion.html	(working copy)
@@ -19,33 +19,42 @@
 <div id="main">
 
 	<div id="list1">
-		<a>There is one obvious advantage:</a>
-		<div>
-			<p>
-				You've seen it coming!<br/>
-				Buy now and get nothing for free!<br/>
-				Well, at least no free beer. Perhaps a bear, if you can afford it.
-			</p>
-		</div>
-		<a>Now that you've got...</a>
-		<div>
-			<p>
-				your bear, you have to admit it!<br/>
-				No, we aren't selling bears.
-			</p>
-			<p>
-				We could talk about renting one.
-			</p>
-		</div>
-		<a>Rent one bear, ...</a>
-		<div>
-			<p>
-				get two for three beer.
-			</p>
-			<p>
-				And now, for something completely different.
-			</p>
-		</div>
+	    <div>
+	        <h3><a>There is one obvious advantage:</a></h3>
+	        <div>
+	            <p>
+	                You've seen it coming!
+	                <br/>
+	                Buy now and get nothing for free!
+	                <br/>
+	                Well, at least no free beer. Perhaps a bear, if you can afford it.
+	            </p>
+	        </div>
+	    </div>
+	    <div>
+	        <h3><a>Now that you've got...</a></h3>
+	        <div>
+	            <p>
+	                your bear, you have to admit it!
+	                <br/>
+	                No, we aren't selling bears.
+	            </p>
+	            <p>
+	                We could talk about renting one.
+	            </p>
+	        </div>
+	    </div>
+	    <div>
+	        <h3><a>Rent one bear, ...</a></h3>
+	        <div>
+	            <p>
+	                get two for three beer.
+	            </p>
+	            <p>
+	                And now, for something completely different.
+	            </p>
+	        </div>
+	    </div>
 	</div>
 
 	<ul id="navigation">
@@ -50,7 +59,7 @@
 
 	<ul id="navigation">
 		<li>
-			<a class="head" href="?p=1.1.1">Guitar</a>
+			<h3><a href="?p=1.1.1">Guitar</a></h3>
 			<ul>
 				<li><a href="?p=1.1.1.1">Electric</a></li>
 				<li><a href="?p=1.1.1.2">Acoustic</a></li>
@@ -60,7 +69,7 @@
 			</ul> 
 		</li>
 		<li>
-			<a class="head" href="?p=1.1.2"><span>Bass</span></a>
+			<h3><a href="?p=1.1.2"><span>Bass</span></a></h3>
 			<ul>
 				<li><a href="?p=1.1.2.1">Electric</a></li>
 				<li><a href="?p=1.1.2.2">Acoustic</a></li>
@@ -72,7 +81,7 @@
 			</ul> 
 		</li>
 		<li>
-			<a class="head" href="?p=1.1.3">Drums</a>
+			<h3><a href="?p=1.1.3">Drums</a></h3>
 			<ul>
 				<li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
 				<li><a href="?p=1.1.3.3">Electronic Drums</a></li>
@@ -80,45 +89,6 @@
 			</ul> 
 		</li>
 	</ul>
-	<dl id="list2">
-		<dt class="red">Red</dt>
-		<dd>
-			Fancy stuff about red thingies.
-		</dd>
-		<dt class="green selected">Green</dt>
-		<dd>
-			Green! Green! Green!
-		</dd>
-		<dt class="blue">Blue</dt>
-		<dd>
-			Cool kids are blue.
-		</dd>
-	</dl>
-
-	<div id="list3">
-		<div>
-			<div class="title">Tennis</div>
-			<div>
-				One ball, two players. Lots of fun.
-			</div>
-		</div>
-		<div>
-			<div class="title">Soccer</div>
-			<div>
-				One ball, 22 players. Lots of fun.
-			</div>
-		</div>
-		<div>
-			<div class="title">Baseball</div>
-			<div>
-				Well, one ball, some guys running around, some guys hitting others with a stick.<br/>
-				Sounds like fun, doesn't it?
-			</div>
-			<div>
-				Well, apart from the running part.
-			</div>
-		</div>
-	</div>
 
 </div>
 
Index: tests/accordion.js
===================================================================
--- tests/accordion.js	(revision 1063)
+++ tests/accordion.js	(working copy)
@@ -10,7 +10,7 @@
 function state(accordion) {
 	var args = $.makeArray(arguments).slice(1);
 	$.each(args, function(i, n) {
-		equals(accordion.find("div").eq(i).is(":visible"), n);
+		equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n);
 	});
 }
 
@@ -19,15 +19,15 @@
 }
 
 test("basics", function() {
-	state($('#list1').accordion(), 1, 0, 0);
+	state($('#list1').accordion({header:"h3"}), 1, 0, 0);
 });
 
 test("autoheight", function() {
-	$('#navigation').accordion({ header: '.head', autoHeight: false });
+	$('#navigation').accordion({ header: 'h3', autoHeight: false });
 	equals( 90, $('#navigation ul:first').height() );
 	equals( 126, $('#navigation ul:eq(1)').height() );
 	equals( 54, $('#navigation ul:last').height() );
-	$('#navigation').accordion("destroy").accordion({ header: '.head', autoHeight: true });
+	$('#navigation').accordion("destroy").accordion({ header: 'h3', autoHeight: true });
 	equals( 126, $('#navigation ul:first').height() );
 	equals( 126, $('#navigation ul:eq(1)').height() );
 	equals( 126, $('#navigation ul:last').height() );
@@ -34,7 +34,7 @@
 });
 
 test("activate, numeric", function() {
-	var ac = $('#list1').accordion({ active: 1 });
+	var ac = $('#list1').accordion({ header: "h3", active: 1 });
 	state(ac, 0, 1, 0);
 	ac.accordion("activate", 2);
 	state(ac, 0, 0, 1);
@@ -49,7 +49,7 @@
 });
 
 test("activate, boolean and numeric, alwaysOpen:false", function() {
-	var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2);
+	var ac = $('#list1').accordion({header: "h3", alwaysOpen: false}).accordion("activate", 2);
 	state(ac, 0, 0, 1);
 	ok("x", "----");
 	ac.accordion("activate", 0);
@@ -60,7 +60,7 @@
 });
 
 test("activate, boolean, alwaysOpen:true", function() {
-	var ac = $('#list1').accordion().accordion("activate", 2);
+	var ac = $('#list1').accordion({header:"h3"}).accordion("activate", 2);
 	state(ac, 0, 0, 1);
 	ac.accordion("activate", -1);
 	state(ac, 0, 0, 1);
@@ -67,7 +67,7 @@
 });
 
 test("activate, string expression", function() {
-	var ac = $('#list1').accordion({ active: ":last" });
+	var ac = $('#list1').accordion({ header: "h3", active: "h3:last" });
 	state(ac, 0, 0, 1);
 	ac.accordion("activate", ":first");
 	state(ac, 1, 0, 0);
@@ -78,11 +78,11 @@
 });
 
 test("activate, jQuery or DOM element", function() {
-	var ac = $('#list1').accordion({ active: $("#list1 a:last") });
+	var ac = $('#list1').accordion({ header: "h3", active: $("#list1 h3:last") });
 	state(ac, 0, 0, 1);
-	ac.accordion("activate", $("#list1 a:first"));
+	ac.accordion("activate", $("#list1 h3:first"));
 	state(ac, 1, 0, 0);
-	ac.accordion("activate", $("#list1 a")[1]);
+	ac.accordion("activate", $("#list1 h3")[1]);
 	state(ac, 0, 1, 0);
 });
 
@@ -94,7 +94,7 @@
 }
 
 test("handle click on header-descendant", function() {
-	var ac = $('#navigation').accordion({ header: '.head', autoHeight: false })
+	var ac = $('#navigation').accordion({ header: 'h3', autoHeight: false })
 	ac.triggerEvent("click", $('#navigation span:contains(Bass)')[0]);
 	state2(ac, 0, 1, 0);
 });
@@ -101,6 +101,7 @@
 
 test("active:false", function() {
 	$("#list1").accordion({
+		header: 'h3',
 		active: false,
 		alwaysOpen: false
 	});
@@ -110,6 +111,7 @@
 test("accordionchange event, open closed and close again", function() {
 	expect(8);
 	$("#list1").accordion({
+		header: 'h3',
 		active: false,
 		alwaysOpen: false
 	})
@@ -131,7 +133,7 @@
 
 test("accessibility", function () {
 	expect(9);
-	var ac = $('#list1').accordion().accordion("activate", 1);
+	var ac = $('#list1').accordion({header: 'h3'}).accordion("activate", 1);
 	var headers = $(".ui-accordion-header");
 
 	equals( headers.eq(1).attr("tabindex"), "0", "active header should have tabindex=0");
Index: tests/visual/accordion.html
===================================================================
--- tests/visual/accordion.html	(revision 0)
+++ tests/visual/accordion.html	(revision 0)
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Accordion Visual Test</title>
+
+	<link rel="stylesheet" href="../../themes/base/ui.core.css" type="text/css">
+	<link rel="stylesheet" href="../../themes/base/ui.accordion.css" type="text/css">
+
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+
+	<script type="text/javascript">
+		$(function() {
+			$("#myAccordion").accordion({
+				header: "h3"
+			});
+		})
+	</script>
+</head>
+<body style="font-size: 62.5%;">
+
+ 	<div id="myAccordion">
+        <div>
+            <h3><a href="#">Test 1</a></h3>
+            <div>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+            </div>
+        </div>
+        <div>
+            <h3><a href="#">Test 2</a></h3>
+            <div>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+            </div>
+        </div>
+        <div>
+            <h3><a href="#">Test 3</a></h3>
+            <div>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
Index: ui/ui.accordion.js
===================================================================
--- ui/ui.accordion.js	(revision 1063)
+++ ui/ui.accordion.js	(working copy)
@@ -28,10 +28,16 @@
 				}
 			}
 		}
-
-		// calculate active if not specified, using the first header
-		options.headers = this.element.find(options.header);
-		options.active = findActive(options.headers, options.active);
+		
+		this.element.addClass("ui-accordion ui-widget ui-helper-reset");
+		var groups = this.element.children().addClass("ui-accordion-group");
+		var headers = options.headers = groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all");
+		headers.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
+		
+		var active = options.active = findActive(headers, options.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
+		active.parent().addClass("selected");
+		$("<span/>").addClass("ui-icon ui-icon-circle-plus").prependTo(headers);
+		active.find(".ui-icon").toggleClass("ui-icon-circle-plus").toggleClass("ui-icon-circle-minus");
 
 		// IE7-/Win - Extra vertical space in Lists fixed
 		if ($.browser.msie) {
@@ -38,13 +44,6 @@
 			this.element.find('a').css('zoom', '1');
 		}
 
-		if (!this.element.hasClass("ui-accordion")) {
-			this.element.addClass("ui-accordion");
-			$('<span class="ui-accordion-left"/>').insertBefore(options.headers);
-			$('<span class="ui-accordion-right"/>').appendTo(options.headers);
-			options.headers.addClass("ui-accordion-header");
-		}
-
 		var maxHeight;
 		if ( options.fillSpace ) {
 			maxHeight = this.element.parent().height();
@@ -84,8 +83,7 @@
 		} else {
 			options.active
 				.attr('aria-expanded','true')
-				.attr("tabIndex", "0")
-				.parent().andSelf().addClass(options.selectedClass);
+				.attr("tabIndex", "0");
 		}
 
 		// only need links in taborder for Safari
@@ -98,6 +96,7 @@
 	},
 
 	destroy: function() {
+		// TODO update
 		this.options.headers.parent().andSelf().removeClass(this.options.selectedClass);
 		this.options.headers.prev(".ui-accordion-left").remove();
 		this.options.headers.children(".ui-accordion-right").remove();
@@ -260,10 +259,9 @@
 	if (options.disabled) {
 		return false;
 	}
-
 	// called only when using activate(false) to close all parts programmatically
 	if ( !event.target && !options.alwaysOpen ) {
-		options.active.parent().andSelf().toggleClass(options.selectedClass);
+		options.active.parent().toggleClass(options.selectedClass);
 		var toHide = options.active.next(),
 			data = {
 				options: options,
@@ -295,9 +293,13 @@
 	}
 
 	// switch classes
-	options.active.parent().andSelf().toggleClass(options.selectedClass);
+	options.active.parent().toggleClass(options.selectedClass);
+	options.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
+		.find(".ui-icon").removeClass("ui-icon-circle-minus").addClass("ui-icon-circle-plus");
 	if ( !clickedActive ) {
-		clicked.parent().andSelf().addClass(options.selectedClass);
+		clicked.parent().addClass(options.selectedClass);
+		clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
+			.find(".ui-icon").removeClass("ui-icon-circle-plus").addClass("ui-icon-circle-minus");
 	}
 
 	// find elements to show and hide
