Accordion: Fixed #3788: Removed wrapper divs and smoothed animations, allowing accord...

diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html
index 635361b26a776285a9f22653fe62e70e6077d21f..89d78e1cf5ec8be1dc45c22d6f4af7d76ebbe7e4 100644 (file)
--- 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 76cd1d86ac0cfcb3a1ede425282231e3d926c5a6..4dae8bb84a7ac29770ec5fa72b27ee9ff67b6340 100644 (file)
--- 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 7a8445b8db1d74c0d8f63200a072266a64bebb8c..37353ffa5df1f48534098fd941ed9ad8f8955ec2 100644 (file)
--- 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 dde1c6a7c75c7e654f9c731586da5f0d0a2450c1..0a2f8ae166ee4ad299bc4c8482bfc553750dcad5 100644 (file)
--- 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 309c75de00bd7d065231544979c56886e7a61833..89134f9025f5c50bba84b713d21c285ff6f4610f 100644 (file)
--- 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 1d2ff4d3c9b73e271aa29685245207677667d0f3..ecf63f8214d5887039386fe1a38c0d3a397f2ab4 100644 (file)
--- 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 64d8e76c0645b324345926d51598947f434a5c94..1dbfde4b614d253464978213bf795837e80028e9 100644 (file)
--- 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 f53eab857023dd2e85902cd669ded4776e5e327f..dff8407d9c11270bcdc9808ed0eec97fb2822f06 100644 (file)
--- 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 8aae67134cb6bccd0850f14aa376e0eb6792c96a..84c3c37df5711c7b2366678f1b32c58c0491c900 100644 (file)
--- 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 d9f8c4b64b5c73459e5a9cf3a4cd12670ce890f4..e3946982753667239d8b24a0202697d685eda5fe 100644 (file)
--- 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 fd467dc27f0d95838ecaadd82aa9e4b7191080ff..b5322391ab0f9017b9b6ddadaffc894165ea0dfe 100644 (file)
--- 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 d8b94dc63bcec4f3cee093700f15f7e639ae4ed7..1aacc1b59993202947133d4fe8bcd0f08e5b2ffb 100644 (file)
--- 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 (file)
index 0000000..9bc8886
--- /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 0d4bca4dfb4a61c5e4a389dfc7777fda508ac036..c84ad4e91a119cedb741a6ad93d774bb0c8e7fb1 100644 (file)
--- 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 f760cec0f2e3512460447df5018c18b61c7c34ef..5d976d8eecee15d30078d21ca2b862d9d6331ef3 100644 (file)
--- 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,