library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

demos/accordion/default.html: highlighted note about when not to use accordion

Browse Source
This commit is contained in:
Richard Worth 2008-12-31 00:38:04 +00:00
parent 177c546eb5
commit 8ed5c40bfb
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demos/accordion/default.html
View File

@ -59,13 +59,17 @@
<p>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.</p> <p>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.</p>
<p>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:</p> <div style="padding: 0pt 0.7em; margin-top: 20px;" class="ui-state-highlight ui-corner-all">
<p>
<pre>jQuery(document).ready(function(){ <span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
$(".accordion .head").click(function() { <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:
$(this).next().toggle(); <pre class="ui-widget-content">jQuery(document).ready(function(){
}).next().hide(); $(".accordion .head").click(function() {
$(this).next().toggle();
}).next().hide();
});</pre> });</pre>
</p>
</div>
</div><!-- End demo-description --> </div><!-- End demo-description -->

1
demos/index.html
View File

@ -3,6 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Demos</title> <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" /> <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="../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script> <script type="text/javascript" src="../ui/ui.core.js"></script>