Accordion: Fixed #3788: Removed wrapper divs and smoothed animations, allowing accordions to work with dl's and ul's again.

15 files changed, 183 insertions, 217 deletions

diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html
index 635361b26..89d78e1cf 100644
--- a/demos/accordion/collapsible.html
+++ b/demos/accordion/collapsible.html
@@ -21,34 +21,26 @@
 <div class="demo">
 
 <div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
 	<div>
-		<h3><a href="#">Section 1</a></h3>
-		<div>
-			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
-		</div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
 	</div>
+	<h3><a href="#">Section 2</a></h3>
 	<div>
-		<h3><a href="#">Section 2</a></h3>
-		<div>
-			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
-		</div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
 	</div>
+	<h3><a href="#">Section 3</a></h3>
 	<div>
-		<h3><a href="#">Section 3</a></h3>
-		<div>
-			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
-			<ul>
-				<li>List item one</li>
-				<li>List item two</li>
-				<li>List item three</li>
-			</ul>
-		</div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
 	</div>
+	<h3><a href="#">Section 4</a></h3>
 	<div>
-		<h3><a href="#">Section 4</a></h3>
-		<div>
-			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
-		</div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 	</div>
 </div>
 
diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html
index 76cd1d86a..4dae8bb84 100644
--- a/demos/accordion/custom-icons.html
+++ b/demos/accordion/custom-icons.html
@@ -24,34 +24,26 @@
 <div class="demo">
 
 <div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
 	<div>
-		<h3><a href="#">Section 1</a></h3>
-		<div>
-			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
-		</div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
 	</div>
+	<h3><a href="#">Section 2</a></h3>
 	<div>
-		<h3><a href="#">Section 2</a></h3>
-		<div>
-			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
-		</div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
 	</div>
+	<h3><a href="#">Section 3</a></h3>
 	<div>
-		<h3><a href="#">Section 3</a></h3>
-		<div>
-			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
-			<ul>
-				<li>List item one</li>
-				<li>List item two</li>
-				<li>List item three</li>
-			</ul>
-		</div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
 	</div>
+	<h3><a href="#">Section 4</a></h3>
 	<div>
-		<h3><a href="#">Section 4</a></h3>
-		<div>
-			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
-		</div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 	</div>
 </div>
 
diff --git a/demos/accordion/default.html b/demos/accordion/default.html
index 7a8445b8d..37353ffa5 100644
--- a/demos/accordion/default.html
+++ b/demos/accordion/default.html
@@ -20,59 +20,51 @@
 <div class="demo">
 
 <div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
 	<div>
-		<h3><a href="#">Section 1</a></h3>
-		<div>
-			<p>
-			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
-			ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
-			amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
-			odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-			</p>
-		</div>
+		<p>
+		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+		</p>
 	</div>
+	<h3><a href="#">Section 2</a></h3>
 	<div>
-		<h3><a href="#">Section 2</a></h3>
-		<div>
-			<p>
-			Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
-			purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
-			velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
-			suscipit faucibus urna.
-			</p>
-		</div>
+		<p>
+		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+		suscipit faucibus urna.
+		</p>
 	</div>
+	<h3><a href="#">Section 3</a></h3>
 	<div>
-		<h3><a href="#">Section 3</a></h3>
-		<div>
-			<p>
-			Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
-			Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
-			ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
-			lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-			</p>
-			<ul>
-				<li>List item one</li>
-				<li>List item two</li>
-				<li>List item three</li>
-			</ul>
-		</div>
+		<p>
+		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+		</p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
 	</div>
+	<h3><a href="#">Section 4</a></h3>
 	<div>
-		<h3><a href="#">Section 4</a></h3>
-		<div>
-			<p>
-			Cras dictum. Pellentesque habitant morbi tristique senectus et netus
-			et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
-			faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
-			mauris vel est.
-			</p>
-			<p>
-			Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
-			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
-			inceptos himenaeos.
-			</p>
-		</div>
+		<p>
+		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+		mauris vel est.
+		</p>
+		<p>
+		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+		inceptos himenaeos.
+		</p>
 	</div>
 </div>
 
diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html
index dde1c6a7c..0a2f8ae16 100644
--- a/demos/accordion/fillspace.html
+++ b/demos/accordion/fillspace.html
@@ -34,34 +34,26 @@
 <div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">
 
 <div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
 	<div>
-		<h3><a href="#">Section 1</a></h3>
-		<div>
-			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
-		</div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
 	</div>
+	<h3><a href="#">Section 2</a></h3>
 	<div>
-		<h3><a href="#">Section 2</a></h3>
-		<div>
-			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
-		</div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
 	</div>
+	<h3><a href="#">Section 3</a></h3>
 	<div>
-		<h3><a href="#">Section 3</a></h3>
-		<div>
-			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
-			<ul>
-				<li>List item one</li>
-				<li>List item two</li>
-				<li>List item three</li>
-			</ul>
-		</div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
 	</div>
+	<h3><a href="#">Section 4</a></h3>
 	<div>
-		<h3><a href="#">Section 4</a></h3>
-		<div>
-			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
-		</div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 	</div>
 </div>
 
diff --git a/demos/accordion/index.html b/demos/accordion/index.html
index 309c75de0..89134f902 100644
--- a/demos/accordion/index.html
+++ b/demos/accordion/index.html
@@ -13,7 +13,6 @@
 			<li><a href="collapsible.html">Collapse content</a></li>
 			<li><a href="mouseover.html">Open on mouseover</a></li>
 			<li><a href="custom-icons.html">Customize icons</a></li>
-			
 		</ul>
 	</div>
 </body>
diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html
index 1d2ff4d3c..ecf63f821 100644
--- a/demos/accordion/mouseover.html
+++ b/demos/accordion/mouseover.html
@@ -21,34 +21,26 @@
 <div class="demo">
 
 <div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
 	<div>
-		<h3><a href="#">Section 1</a></h3>
-		<div>
-			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
-		</div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
 	</div>
+	<h3><a href="#">Section 2</a></h3>
 	<div>
-		<h3><a href="#">Section 2</a></h3>
-		<div>
-			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
-		</div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
 	</div>
+	<h3><a href="#">Section 3</a></h3>
 	<div>
-		<h3><a href="#">Section 3</a></h3>
-		<div>
-			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
-			<ul>
-				<li>List item one</li>
-				<li>List item two</li>
-				<li>List item three</li>
-			</ul>
-		</div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
 	</div>
+	<h3><a href="#">Section 4</a></h3>
 	<div>
-		<h3><a href="#">Section 4</a></h3>
-		<div>
-			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
-		</div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 	</div>
 </div>
 
diff --git a/tests/static/accordion/default.html b/tests/static/accordion/default.html
index 64d8e76c0..1dbfde4b6 100644
--- a/tests/static/accordion/default.html
+++ b/tests/static/accordion/default.html
@@ -7,17 +7,6 @@
 	<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
 	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
 	<script type="text/javascript" src="../static.js"></script>
-	<style type="text/css">
-  	/* Accordion
-	----------------------------------*/
-	.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
-	.ui-accordion li {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 .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; }
-	</style>
 </head>
 <body>
 
diff --git a/tests/static/accordion/dl.html b/tests/static/accordion/dl.html
index f53eab857..dff8407d9 100644
--- a/tests/static/accordion/dl.html
+++ b/tests/static/accordion/dl.html
@@ -7,17 +7,6 @@
 	<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
 	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
 	<script type="text/javascript" src="../static.js"></script>
-	<style type="text/css">
-  	/* Accordion
-	----------------------------------*/
-	.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
-	.ui-accordion li {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 .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; }
-	</style>
 </head>
 <body>
 
diff --git a/tests/static/accordion/ul.html b/tests/static/accordion/ul.html
index 8aae67134..84c3c37df 100644
--- a/tests/static/accordion/ul.html
+++ b/tests/static/accordion/ul.html
@@ -7,17 +7,6 @@
 	<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
 	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
 	<script type="text/javascript" src="../static.js"></script>
-	<style type="text/css">
-  	/* Accordion
-	----------------------------------*/
-	.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
-	.ui-accordion li {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 .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; }
-	</style>
 </head>
 <body>
 
diff --git a/tests/unit/accordion/accordion.js b/tests/unit/accordion/accordion.js
index d9f8c4b64..e39469827 100644
--- a/tests/unit/accordion/accordion.js
+++ b/tests/unit/accordion/accordion.js
@@ -10,13 +10,13 @@ jQuery.ui.accordion.defaults.animated = false;
 function state(accordion) {
 	var args = $.makeArray(arguments).slice(1);
 	$.each(args, function(i, n) {
-		equals(accordion.find(".ui-accordion-content").parent().eq(i).is(":visible"), n);
+		equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n);
 	});
 }
 
 $.fn.triggerEvent = function(type, target) {
 	return this.triggerHandler(type, [jQuery.event.fix({ type: type, target: target })]);
-}
+};
 
 test("basics", function() {
 	state($('#list1').accordion(), 1, 0, 0);
diff --git a/tests/visual/accordion/accordion.html b/tests/visual/accordion/accordion.html
index fd467dc27..b5322391a 100644
--- a/tests/visual/accordion/accordion.html
+++ b/tests/visual/accordion/accordion.html
@@ -16,7 +16,7 @@
 				$("#accordion").accordion("destroy");
 			}
 			$("#toggle").toggle(on, off).click();
-		})
+		});
 	</script>
 </head>
 <body>
@@ -25,23 +25,17 @@
 <li class="plugin">
 	Accordion
 	<div id="accordion">
+		<h3><a href="#">First</a></h3>
 		<div>
-			<h3><a href="#">First</a></h3>
-			<div>
-				Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
-			</div>
+			Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
 		</div>
+		<h3><a href="#">Second</a></h3>
 		<div>
-			<h3><a href="#">Second</a></h3>
-			<div>
-				Phasellus mattis tincidunt nibh.
-			</div>
+			Phasellus mattis tincidunt nibh.
 		</div>
+		<h3><a href="#">Third</a></h3>
 		<div>
-			<h3><a href="#">Third</a></h3>
-			<div>
-				Nam dui erat, auctor a, dignissim quis.
-			</div>
+			Nam dui erat, auctor a, dignissim quis.
 		</div>
 	</div>
 	<button id="toggle">Toggle</button>
diff --git a/tests/visual/accordion/default.html b/tests/visual/accordion/default.html
index d8b94dc63..1aacc1b59 100644
--- a/tests/visual/accordion/default.html
+++ b/tests/visual/accordion/default.html
@@ -16,23 +16,17 @@
 <body>
 
 <div id="accordion">
+	<h3><a href="#">Accordion Header 1</a></h3>
 	<div>
-		<h3><a href="#">Accordion Header 1</a></h3>
-		<div>
-			Accordion Content 1
-		</div>
+		Accordion Content 1
 	</div>
+	<h3><a href="#">Accordion Header 2</a></h3>
 	<div>
-		<h3><a href="#">Accordion Header 2</a></h3>
-		<div>
-			Accordion Content 2
-		</div>
+		Accordion Content 2
 	</div>
+	<h3><a href="#">Accordion Header 3</a></h3>
 	<div>
-		<h3><a href="#">Accordion Header 3</a></h3>
-		<div>
-			Accordion Content 3
-		</div>
+		Accordion Content 3
 	</div>
 </div>
 
diff --git a/tests/visual/accordion/dl.html b/tests/visual/accordion/dl.html
new file mode 100644
index 000000000..9bc8886e8
--- /dev/null
+++ b/tests/visual/accordion/dl.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+<head>
+	<title>Accordion Static Test : DL</title>
+	<link rel="stylesheet" href="../../static/static.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.3.1.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() {
+		$("dl").accordion({
+			header: "dt"
+		})
+	});
+	</script>
+</head>
+<body>
+
+<dl>
+	<dt>
+		<a href="#">Accordion Header 1</a>
+	</dt>
+	<dd>
+			Accordion Content 1
+	</dd>
+	<dt>
+		<a href="#">Accordion Header 2</a>
+	</dt>
+	<dd>
+			Accordion Content 2
+	</dd>
+	<dt>
+		<a href="#">Accordion Header 3</a>
+	</dt>
+	<dd>
+			Accordion Content 2
+	</dd>
+</dl>
+
+</body>
+</html>
diff --git a/themes/base/ui.accordion.css b/themes/base/ui.accordion.css
index 0d4bca4df..c84ad4e91 100644
--- a/themes/base/ui.accordion.css
+++ b/themes/base/ui.accordion.css
@@ -1,9 +1,9 @@
 /* Accordion
 ----------------------------------*/
-.ui-accordion .ui-accordion-group {margin-bottom: 1px;}
-.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; zoom: 1; }
-.ui-accordion .ui-accordion-selected .ui-accordion-header { border-bottom: 0; }
-.ui-accordion .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion li {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-content-wrap { border-top: 0; margin-top: -1px; position: relative; top: 1px; margin-bottom: 2px; }
-.ui-accordion .ui-accordion-content { padding: 1em 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; }
\ No newline at end of file
diff --git a/ui/ui.accordion.js b/ui/ui.accordion.js
index f760cec0f..5d976d8ee 100644
--- a/ui/ui.accordion.js
+++ b/ui/ui.accordion.js
@@ -26,28 +26,23 @@ $.widget("ui.accordion", {
 					this.active = current;
 				} else {
 					this.active = current.parent().parent().prev();
-					current.addClass("ui-accordion-current");
+					current.addClass("ui-accordion-content-active");
 				}
 			}
 		}
 
 		this.element.addClass("ui-accordion ui-widget ui-helper-reset");
 
-		this.groups = this.element.children().addClass("ui-accordion-group");
-		this.headers = this.groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
+		this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
 			.bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
 			.bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); });
 
-		// wrap content elements in div against animation issues
 		this.headers
 			.next()
-				.wrap("<div></div>")
-				.addClass("ui-accordion-content")
-				.parent()
-					.addClass("ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom");
+				.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
 
 		this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
-		this.active.parent().addClass('ui-accordion-selected');
+		this.active.next().addClass('ui-accordion-content-active');
 
 		//Append icon elements
 		$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
@@ -103,7 +98,6 @@ $.widget("ui.accordion", {
 			.unbind('.accordion')
 			.removeData('accordion');
 
-		this.element.children().removeClass("ui-accordion-group ui-accordion-selected");
 		this.headers
 			.unbind(".accordion")
 			.removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
@@ -111,7 +105,7 @@ $.widget("ui.accordion", {
 
 		this.headers.find("a").removeAttr("tabindex");
 		this.headers.children(".ui-icon").remove();
-		this.headers.next().children().removeClass("ui-accordion-content").each(function() {
+		this.headers.next().removeClass("ui-accordion-content ui-accordion-content-active").each(function() {
 			$(this).parent().replaceWith(this);
 		});
 
@@ -204,9 +198,9 @@ $.widget("ui.accordion", {
 
 		// called only when using activate(false) to close all parts programmatically
 		if (!event.target && !o.alwaysOpen) {
-			this.active.parent().toggleClass('ui-accordion-selected');
 			this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
 				.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
+			this.active.next().addClass('ui-accordion-content-active');
 			var toHide = this.active.next(),
 				data = {
 					options: o,
@@ -238,13 +232,13 @@ $.widget("ui.accordion", {
 		}
 
 		// switch classes
-		this.active.parent().toggleClass('ui-accordion-selected');
 		this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
 			.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
+		this.active.next().addClass('ui-accordion-content-active');
 		if (!clickedIsActive) {
-			clicked.parent().addClass('ui-accordion-selected');
 			clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
 				.find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
+			clicked.next().addClass('ui-accordion-content-active');
 		}
 
 		// find elements to show and hide
@@ -366,7 +360,6 @@ $.widget("ui.accordion", {
 		}
 
 		this._trigger('change', null, this.data);
-
 	}
 
 });
@@ -405,15 +398,31 @@ $.extend($.ui.accordion, {
 			var hideHeight = options.toHide.height(),
 				showHeight = options.toShow.height(),
 				difference = showHeight / hideHeight,
-				overflow = options.toShow.css('overflow');
+				overflow = options.toShow.css('overflow'),
+				showProps = {},
+				hideProps = {},
+				fxAttrs = [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTop", "borderBottom" ];
+			// border animations break IE (only tested in IE6)
+			($.browser.msie && fxAttrs.pop() && fxAttrs.pop());
+			$.each(fxAttrs, function(i, prop) {
+				hideProps[prop] = 'hide';
+				showProps[prop] = parseFloat(options.toShow.css(prop));
+			});
 			options.toShow.css({ height: 0, overflow: 'hidden' }).show();
-			options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
-				step: function(now) {
-					var current = (hideHeight - now) * difference;
+			options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
+				step: function(now, settings) {
+					// if the alwaysOpen option is set to false, we may not have
+					// a content pane to show
+					if (!options.toShow[0]) { return; }
+					
+					var percentDone = settings.start != settings.end
+						? (settings.now - settings.start) / (settings.end - settings.start)
+						: 0,
+						current = percentDone * showProps[settings.prop];
 					if ($.browser.msie || $.browser.opera) {
 						current = Math.ceil(current);
 					}
-					options.toShow.height( current );
+					options.toShow[0].style[settings.prop] = current + 'px';
 				},
 				duration: options.duration,
 				easing: options.easing,