<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Accordion Visual Test</title>
- <link rel="stylesheet" href="../all.css" type="text/css">
+ <title>Accordion Visual Test : Accordion</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.2.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() {
- function on() {
- $("#accordion").accordion();
- }
- function off() {
- $("#accordion").accordion("destroy");
- }
- $("#toggle").toggle(on, off).click();
- });
+ $(function() {
+ $("#accordion").accordion();
+ })
</script>
</head>
<body>
-<ul class="plugins">
-<li class="plugin">
- Accordion
- <div id="accordion">
- <h3><a href="#">First</a></h3>
- <div>
- Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
- </div>
- <h3><a href="#">Second</a></h3>
- <div>
- Phasellus mattis tincidunt nibh.
- </div>
- <h3><a href="#">Third</a></h3>
- <div>
- Nam dui erat, auctor a, dignissim quis.
- </div>
+<div id="accordion">
+ <h3><a href="#">Accordion Header 1</a></h3>
+ <div>
+ Accordion Content 1
</div>
- <button id="toggle">Toggle</button>
-</li>
-</ul>
+ <h3><a href="#">Accordion Header 2</a></h3>
+ <div>
+ Accordion Content 2
+ </div>
+ <h3><a href="#">Accordion Header 3</a></h3>
+ <div>
+ Accordion Content 3
+ </div>
+</div>
</body>
</html>
--- /dev/null
+<!doctype html>
+<html>
+<head>
+ <title>Accordion Static Test : Accordion 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.2.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()
+ });
+ </script>
+</head>
+<body>
+
+<dl>
+ <dt><a href="#">Accordion Header 1</a></dt>
+ <dd>
+ Accordion Content 1
+ <dl>
+ <dt>Term 1</dt>
+ <dt>Definition 1</dt>
+ <dt>Term 2</dt>
+ <dt>Definition 2</dt>
+ </dl>
+ </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>
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion method destroy</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion().accordion("destroy");\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion method disable</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion().accordion("disable");\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion option animated 'bounceslide'</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript" src="../../../ui/effects.core.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion({\r
+ animated: 'bounceslide'\r
+ });\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion option animated easeslide</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript" src="../../../ui/effects.core.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion({\r
+ animated: 'easeslide'\r
+ });\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion option animated false</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion({\r
+ animated: false\r
+ });\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion option animated slide</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion({\r
+ animated: 'slide'\r
+ });\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>Accordion Visual Test : Accordion option animated true</title>\r
+ <link rel="stylesheet" href="../visual.css" type="text/css" />\r
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">\r
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#accordion").accordion({\r
+ animated: true\r
+ });\r
+ })\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div id="accordion">\r
+ <h3><a href="#">Accordion Header 1</a></h3>\r
+ <div>\r
+ Accordion Content 1\r
+ </div>\r
+ <h3><a href="#">Accordion Header 2</a></h3>\r
+ <div>\r
+ Accordion Content 2\r
+ </div>\r
+ <h3><a href="#">Accordion Header 3</a></h3>\r
+ <div>\r
+ Accordion Content 3\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Accordion Visual Test : Accordion option autoHeight false</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+ <script type="text/javascript" src="../../../jquery-1.3.2.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() {
+ $("#accordion").accordion({
+ autoHeight: false
+ });
+ })
+ </script>
+</head>
+<body>
+
+<div id="accordion">
+ <h3><a href="#">Accordion Header 1</a></h3>
+ <div>
+ Accordion Content 1
+ </div>
+ <h3><a href="#">Accordion Header 2</a></h3>
+ <div>
+ Accordion Content 2
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ </div>
+ <h3><a href="#">Accordion Header 3</a></h3>
+ <div>
+ Accordion Content 3
+ <ul>
+ <li>list item</li>
+ <li>list item</li>
+ <li>list item</li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>Accordion Visual Test : Accordion ul</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.2.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(){
+ $("#accordion").accordion()
+ });
+ </script>
+ </head>
+ <body>
+ <ul id="accordion">
+ <li>
+ <h2>
+ <a href="#">Accordion Header 1</a>
+ </h2>
+ <div>
+ Accordion Content 1
+ <ul>
+ <li>Some list item</li>
+ <li>Some list item</li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <h2>
+ <a href="#">Accordion Header 2</a>
+ </h2>
+ <div>Accordion Content 2</div>
+ </li>
+ <li>
+ <h2>
+ <a href="#">Accordion Header 3</a>
+ </h2>
+ <div>Accordion Content 2</div>
+ </li>
+ </ul>
+ </body>
+</html>
+++ /dev/null
-<!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.2.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()
- });
- </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>
+++ /dev/null
-<!doctype html>
-<html>
- <head>
- <title>Accordion Visual Test : UL</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.2.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(){
- $("#accordion").accordion()
- });
- </script>
- </head>
- <body>
- <ul id="accordion">
- <li>
- <h2>
- <a href="#">Accordion Header 1</a>
- </h2>
- <div>
- Accordion Content 1
- <ul>
- <li>Some list item</li>
- <li>Some list item</li>
- </ul>
- </div>
- </li>
- <li>
- <h2>
- <a href="#">Accordion Header 2</a>
- </h2>
- <div>Accordion Content 2</div>
- </li>
- <li>
- <h2>
- <a href="#">Accordion Header 3</a>
- </h2>
- <div>Accordion Content 2</div>
- </li>
- </ul>
- </body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Accordion - No Auto Height Test</title>
- <link rel="stylesheet" href="../../static/static.css" type="text/css" />
- <link type="text/css" href="../../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../../jquery-1.3.2.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() {
- $("#accordion").accordion({
- autoHeight: false
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo" style="width:300px">
-
-<div id="accordion">
- <h3><a href="#">Section 1</a></h3>
- <div>
- <p>Mauris mauris ante, blandit et, ultrices a, susceros. 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>
- <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>
- <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</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
-</div>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
projects / jquery-ui.git / commitdiff