imported the whole jquery-ui package, refreshed with 1.10.2
[unfold.git] / third-party / jquery-ui-1.10.2 / demos / accordion / default.html
diff --git a/third-party/jquery-ui-1.10.2/demos/accordion/default.html b/third-party/jquery-ui-1.10.2/demos/accordion/default.html
new file mode 100644 (file)
index 0000000..c3bcfdd
--- /dev/null
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+       <meta charset="utf-8">
+       <title>jQuery UI Accordion - Default functionality</title>
+       <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+       <script src="../../jquery-1.9.1.js"></script>
+       <script src="../../ui/jquery.ui.core.js"></script>
+       <script src="../../ui/jquery.ui.widget.js"></script>
+       <script src="../../ui/jquery.ui.accordion.js"></script>
+       <link rel="stylesheet" href="../demos.css">
+       <script>
+       $(function() {
+               $( "#accordion" ).accordion();
+       });
+       </script>
+</head>
+<body>
+
+<div id="accordion">
+       <h3>Section 1</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>
+       <h3>Section 2</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>
+       <h3>Section 3</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>
+       <h3>Section 4</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>
+</div>
+
+<div class="demo-description">
+<p>
+Click headers to expand/collapse content that is broken into logical sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+</p>
+<p>
+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
+usable without JavaScript.
+</p>
+</div>
+</body>
+</html>