r1378 - in trunk/demos: . accordion

r1378 - in trunk/demos: . accordion


Author: rdworth
Date: Tue Dec 30 16:38:04 2008
New Revision: 1378
Modified:
trunk/demos/accordion/default.html
trunk/demos/index.html
Log:
demos/accordion/default.html: highlighted note about when not to use
accordion
Modified: trunk/demos/accordion/default.html
==============================================================================
--- trunk/demos/accordion/default.html    (original)
+++ trunk/demos/accordion/default.html    Tue Dec 30 16:38:04 2008
@@ -59,13 +59,17 @@

This is a default accordion which is an expandable/collapsible content
pane that is useful for situations when content must be displayed within
limited space and can be broken into logical sections, much like tabs.
Sections open when clicked by default. The HTML code is a series of headers
(H3) and content divs so the content is still usable without Javascript.




-            

If you are looking for a widget that allows more than one content
panel to be open, don't use this plugin. You can achieve this effect with a
few lines of jQuery instead, like this:


-
-<pre>jQuery(document).ready(function(){
-    $(".accordion .head").click(function() {
-        $(this).next().toggle();
-    }).next().hide();
+<div style="padding: 0pt 0.7em; margin-top: 20px;"
class="ui-state-highlight ui-corner-all">
+


+<span style="float: left; margin-right: 0.3em;" class="ui-icon
ui-icon-info"></span>
+<strong>Note:</strong> If you are looking for a widget that allows more
than one content panel to be open, don't use this plugin. You can achieve
this effect with a few lines of jQuery instead, like this:
+<pre class="ui-widget-content">jQuery(document).ready(function(){
+ $(".accordion .head").click(function() {
+ $(this).next().toggle();
+ }).next().hide();
});</pre>
+











+</div>
</div><!-- End demo-description -->
Modified: trunk/demos/index.html
==============================================================================
--- trunk/demos/index.html    (original)
+++ trunk/demos/index.html    Tue Dec 30 16:38:04 2008
@@ -3,6 +3,7 @@
<html lang="en">
<head>
    <title>jQuery UI Demos</title>
+    <link type="text/css" href="../themes/default/ui.all.css"
rel="stylesheet" />
    <link type="text/css" href="demos.css" rel="stylesheet" />
    <script type="text/javascript" src="../jquery-1.2.6.js"></script>
    <script type="text/javascript" src="../ui/ui.core.js"></script>