aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/docs/accordion.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/docs/accordion.html')
-rw-r--r--static/development-bundle/docs/accordion.html869
1 files changed, 869 insertions, 0 deletions
diff --git a/static/development-bundle/docs/accordion.html b/static/development-bundle/docs/accordion.html
new file mode 100644
index 0000000..bf89bc3
--- /dev/null
+++ b/static/development-bundle/docs/accordion.html
@@ -0,0 +1,869 @@
1
2<ul class="UIAPIPlugin-toc">
3<li><a href="#overview">Overview</a></li>
4<li><a href="#options">Options</a></li>
5<li><a href="#events">Events</a></li>
6<li><a href="#methods">Methods</a></li>
7<li><a href="#theming">Theming</a></li>
8</ul>
9<div class="UIAPIPlugin">
10 <h1>jQuery UI Accordion</h1>
11 <div id="overview">
12 <h2 class="top-header">Overview</h2>
13 <div id="overview-main">
14 <p>Make the selected elements Accordion widgets. Semantic requirements:</p>
15<p>The markup of your accordion container needs pairs of headers and content panels. By default, the header elements are anchors, assuming the following structure:</p>
16<pre>&lt;div id=&quot;accordion&quot;&gt;
17 &lt;a href=&quot;#&quot;&gt;First header&lt;/a&gt;
18 &lt;div&gt;First content&lt;/div&gt;
19 &lt;a href=&quot;#&quot;&gt;Second header&lt;/a&gt;
20 &lt;div&gt;Second content&lt;/div&gt;
21&lt;/div&gt;</pre>
22<p>If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'h3'. The content element must be always next to its header.</p>
23<p>If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.</p>
24<p>Use activate(Number) to change the active content programmatically.</p>
25<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.7.2/Accordion?section=1" title="Edit section: NOTE: If you want multiple sections open at once, don't use an accordion">edit</a>]</div><a name="NOTE:_If_you_want_multiple_sections_open_at_once.2C_don.27t_use_an_accordion"></a><h4>NOTE: If you want multiple sections open at once, don't use an accordion</h4>
26<p>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:</p>
27<pre>jQuery(document).ready(function(){
28 $('.accordion .head').click(function() {
29 $(this).next().toggle();
30 return false;
31 }).next().hide();
32});</pre>
33<p>Or animated:</p>
34<pre>jQuery(document).ready(function(){
35 $('.accordion .head').click(function() {
36 $(this).next().toggle('slow');
37 return false;
38 }).next().hide();
39});</pre>
40 </div>
41 <div id="overview-dependencies">
42 <h3>Dependencies</h3>
43 <ul>
44<li>UI Core</li>
45<li>UI Effects Core (Optional - only for non-default animations)</li>
46</ul>
47 </div>
48 <div id="overview-example">
49 <h3>Example</h3>
50 <div id="overview-example" class="example">
51<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
52<p><div id="demo" class="tabs-container" rel="310">
53A simple jQuery UI Accordion.<br />
54</p>
55<pre>$(&quot;#accordion&quot;).accordion();
56</pre>
57<p></div><div id="source" class="tabs-container">
58</p>
59<pre>&lt;!DOCTYPE html&gt;
60&lt;html&gt;
61&lt;head&gt;
62 &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
63 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
64 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
65 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.accordion.js&quot;&gt;&lt;/script&gt;
66 &lt;script type="text/javascript"&gt;
67 $(document).ready(function(){
68 $(&quot;#accordion&quot;).accordion();
69 });
70 &lt;/script&gt;
71&lt;/head&gt;
72&lt;body style="font-size:62.5%;"&gt;
73
74&lt;div id=&quot;accordion&quot;&gt;
75 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
76 &lt;div&gt;
77 &lt;p&gt;
78 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
79 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
80 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
81 odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
82 &lt;/p&gt;
83 &lt;/div&gt;
84 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
85 &lt;div&gt;
86 &lt;p&gt;
87 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
88 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
89 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
90 suscipit faucibus urna.
91 &lt;/p&gt;
92 &lt;/div&gt;
93 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;
94 &lt;div&gt;
95 &lt;p&gt;
96 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
97 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
98 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
99 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
100 &lt;/p&gt;
101 &lt;ul&gt;
102 &lt;li&gt;List item one&lt;/li&gt;
103 &lt;li&gt;List item two&lt;/li&gt;
104 &lt;li&gt;List item three&lt;/li&gt;
105 &lt;/ul&gt;
106 &lt;/div&gt;
107 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 4&lt;/a&gt;&lt;/h3&gt;
108 &lt;div&gt;
109 &lt;p&gt;
110 Cras dictum. Pellentesque habitant morbi tristique senectus et netus
111 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
112 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
113 mauris vel est.
114 &lt;/p&gt;
115 &lt;p&gt;
116 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
117 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
118 inceptos himenaeos.
119 &lt;/p&gt;
120 &lt;/div&gt;
121&lt;/div&gt;
122
123&lt;/body&gt;
124&lt;/html&gt;
125</pre>
126<p></div>
127</p><p></div>
128 </div>
129 </div>
130 <div id="options">
131 <h2 class="top-header">Options</h2>
132 <ul class="options-list">
133
134<li class="option" id="option-active">
135 <div class="option-header">
136 <h3 class="option-name"><a href="#option-active">active</a></h3>
137 <dl>
138 <dt class="option-type-label">Type:</dt>
139 <dd class="option-type">Selector, Element, jQuery, Boolean, Number</dd>
140
141 <dt class="option-default-label">Default:</dt>
142 <dd class="option-default">first child</dd>
143
144 </dl>
145 </div>
146 <div class="option-description">
147 <p>Selector for the active element. Set to false to display none at start. Needs <code>collapsible: true</code>.</p>
148 </div>
149 <div class="option-examples">
150 <h4>Code examples</h4>
151 <dl class="option-examples-list">
152
153<dt>
154 Initialize a accordion with the <code>active</code> option specified.
155</dt>
156<dd>
157<pre><code>$('.selector').accordion({ active: 2 });</code></pre>
158</dd>
159
160
161<dt>
162 Get or set the <code>active</code> option, after init.
163</dt>
164<dd>
165<pre><code>//getter
166var active = $('.selector').accordion('option', 'active');
167//setter
168$('.selector').accordion('option', 'active', 2);</code></pre>
169</dd>
170
171 </dl>
172 </div>
173</li>
174
175
176<li class="option" id="option-animated">
177 <div class="option-header">
178 <h3 class="option-name"><a href="#option-animated">animated</a></h3>
179 <dl>
180 <dt class="option-type-label">Type:</dt>
181 <dd class="option-type">Boolean, String</dd>
182
183 <dt class="option-default-label">Default:</dt>
184 <dd class="option-default">'slide'</dd>
185
186 </dl>
187 </div>
188 <div class="option-description">
189 <p>Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).</p>
190 </div>
191 <div class="option-examples">
192 <h4>Code examples</h4>
193 <dl class="option-examples-list">
194
195<dt>
196 Initialize a accordion with the <code>animated</code> option specified.
197</dt>
198<dd>
199<pre><code>$('.selector').accordion({ animated: 'bounceslide' });</code></pre>
200</dd>
201
202
203<dt>
204 Get or set the <code>animated</code> option, after init.
205</dt>
206<dd>
207<pre><code>//getter
208var animated = $('.selector').accordion('option', 'animated');
209//setter
210$('.selector').accordion('option', 'animated', 'bounceslide');</code></pre>
211</dd>
212
213 </dl>
214 </div>
215</li>
216
217
218<li class="option" id="option-autoHeight">
219 <div class="option-header">
220 <h3 class="option-name"><a href="#option-autoHeight">autoHeight</a></h3>
221 <dl>
222 <dt class="option-type-label">Type:</dt>
223 <dd class="option-type">Boolean</dd>
224
225 <dt class="option-default-label">Default:</dt>
226 <dd class="option-default">true</dd>
227
228 </dl>
229 </div>
230 <div class="option-description">
231 <p>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</p>
232 </div>
233 <div class="option-examples">
234 <h4>Code examples</h4>
235 <dl class="option-examples-list">
236
237<dt>
238 Initialize a accordion with the <code>autoHeight</code> option specified.
239</dt>
240<dd>
241<pre><code>$('.selector').accordion({ autoHeight: false });</code></pre>
242</dd>
243
244
245<dt>
246 Get or set the <code>autoHeight</code> option, after init.
247</dt>
248<dd>
249<pre><code>//getter
250var autoHeight = $('.selector').accordion('option', 'autoHeight');
251//setter
252$('.selector').accordion('option', 'autoHeight', false);</code></pre>
253</dd>
254
255 </dl>
256 </div>
257</li>
258
259
260<li class="option" id="option-clearStyle">
261 <div class="option-header">
262 <h3 class="option-name"><a href="#option-clearStyle">clearStyle</a></h3>
263 <dl>
264 <dt class="option-type-label">Type:</dt>
265 <dd class="option-type">Boolean</dd>
266
267 <dt class="option-default-label">Default:</dt>
268 <dd class="option-default">false</dd>
269
270 </dl>
271 </div>
272 <div class="option-description">
273 <p>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.</p>
274 </div>
275 <div class="option-examples">
276 <h4>Code examples</h4>
277 <dl class="option-examples-list">
278
279<dt>
280 Initialize a accordion with the <code>clearStyle</code> option specified.
281</dt>
282<dd>
283<pre><code>$('.selector').accordion({ clearStyle: true });</code></pre>
284</dd>
285
286
287<dt>
288 Get or set the <code>clearStyle</code> option, after init.
289</dt>
290<dd>
291<pre><code>//getter
292var clearStyle = $('.selector').accordion('option', 'clearStyle');
293//setter
294$('.selector').accordion('option', 'clearStyle', true);</code></pre>
295</dd>
296
297 </dl>
298 </div>
299</li>
300
301
302<li class="option" id="option-collapsible">
303 <div class="option-header">
304 <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
305 <dl>
306 <dt class="option-type-label">Type:</dt>
307 <dd class="option-type">Boolean</dd>
308
309 <dt class="option-default-label">Default:</dt>
310 <dd class="option-default">false</dd>
311
312 </dl>
313 </div>
314 <div class="option-description">
315 <p>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</p>
316 </div>
317 <div class="option-examples">
318 <h4>Code examples</h4>
319 <dl class="option-examples-list">
320
321<dt>
322 Initialize a accordion with the <code>collapsible</code> option specified.
323</dt>
324<dd>
325<pre><code>$('.selector').accordion({ collapsible: true });</code></pre>
326</dd>
327
328
329<dt>
330 Get or set the <code>collapsible</code> option, after init.
331</dt>
332<dd>
333<pre><code>//getter
334var collapsible = $('.selector').accordion('option', 'collapsible');
335//setter
336$('.selector').accordion('option', 'collapsible', true);</code></pre>
337</dd>
338
339 </dl>
340 </div>
341</li>
342
343
344<li class="option" id="option-event">
345 <div class="option-header">
346 <h3 class="option-name"><a href="#option-event">event</a></h3>
347 <dl>
348 <dt class="option-type-label">Type:</dt>
349 <dd class="option-type">String</dd>
350
351 <dt class="option-default-label">Default:</dt>
352 <dd class="option-default">'click'</dd>
353
354 </dl>
355 </div>
356 <div class="option-description">
357 <p>The event on which to trigger the accordion.</p>
358 </div>
359 <div class="option-examples">
360 <h4>Code examples</h4>
361 <dl class="option-examples-list">
362
363<dt>
364 Initialize a accordion with the <code>event</code> option specified.
365</dt>
366<dd>
367<pre><code>$('.selector').accordion({ event: 'mouseover' });</code></pre>
368</dd>
369
370
371<dt>
372 Get or set the <code>event</code> option, after init.
373</dt>
374<dd>
375<pre><code>//getter
376var event = $('.selector').accordion('option', 'event');
377//setter
378$('.selector').accordion('option', 'event', 'mouseover');</code></pre>
379</dd>
380
381 </dl>
382 </div>
383</li>
384
385
386<li class="option" id="option-fillSpace">
387 <div class="option-header">
388 <h3 class="option-name"><a href="#option-fillSpace">fillSpace</a></h3>
389 <dl>
390 <dt class="option-type-label">Type:</dt>
391 <dd class="option-type">Boolean</dd>
392
393 <dt class="option-default-label">Default:</dt>
394 <dd class="option-default">false</dd>
395
396 </dl>
397 </div>
398 <div class="option-description">
399 <p>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</p>
400 </div>
401 <div class="option-examples">
402 <h4>Code examples</h4>
403 <dl class="option-examples-list">
404
405<dt>
406 Initialize a accordion with the <code>fillSpace</code> option specified.
407</dt>
408<dd>
409<pre><code>$('.selector').accordion({ fillSpace: true });</code></pre>
410</dd>
411
412
413<dt>
414 Get or set the <code>fillSpace</code> option, after init.
415</dt>
416<dd>
417<pre><code>//getter
418var fillSpace = $('.selector').accordion('option', 'fillSpace');
419//setter
420$('.selector').accordion('option', 'fillSpace', true);</code></pre>
421</dd>
422
423 </dl>
424 </div>
425</li>
426
427
428<li class="option" id="option-header">
429 <div class="option-header">
430 <h3 class="option-name"><a href="#option-header">header</a></h3>
431 <dl>
432 <dt class="option-type-label">Type:</dt>
433 <dd class="option-type">Selector, jQuery</dd>
434
435 <dt class="option-default-label">Default:</dt>
436 <dd class="option-default">'&gt; li &gt;&nbsp;:first-child,&gt;&nbsp;:not(li):even'</dd>
437
438 </dl>
439 </div>
440 <div class="option-description">
441 <p>Selector for the header element.</p>
442 </div>
443 <div class="option-examples">
444 <h4>Code examples</h4>
445 <dl class="option-examples-list">
446
447<dt>
448 Initialize a accordion with the <code>header</code> option specified.
449</dt>
450<dd>
451<pre><code>$('.selector').accordion({ header: 'h3' });</code></pre>
452</dd>
453
454
455<dt>
456 Get or set the <code>header</code> option, after init.
457</dt>
458<dd>
459<pre><code>//getter
460var header = $('.selector').accordion('option', 'header');
461//setter
462$('.selector').accordion('option', 'header', 'h3');</code></pre>
463</dd>
464
465 </dl>
466 </div>
467</li>
468
469
470<li class="option" id="option-icons">
471 <div class="option-header">
472 <h3 class="option-name"><a href="#option-icons">icons</a></h3>
473 <dl>
474 <dt class="option-type-label">Type:</dt>
475 <dd class="option-type">Object</dd>
476
477 <dt class="option-default-label">Default:</dt>
478 <dd class="option-default">{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }</dd>
479
480 </dl>
481 </div>
482 <div class="option-description">
483 <p>Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by <a href="http://www.themeroller.com" class="external text" title="http://www.themeroller.com">jQuery UI ThemeRoller</a></p>
484 </div>
485 <div class="option-examples">
486 <h4>Code examples</h4>
487 <dl class="option-examples-list">
488
489<dt>
490 Initialize a accordion with the <code>icons</code> option specified.
491</dt>
492<dd>
493<pre><code>$('.selector').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });</code></pre>
494</dd>
495
496
497<dt>
498 Get or set the <code>icons</code> option, after init.
499</dt>
500<dd>
501<pre><code>//getter
502var icons = $('.selector').accordion('option', 'icons');
503//setter
504$('.selector').accordion('option', 'icons', { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' });</code></pre>
505</dd>
506
507 </dl>
508 </div>
509</li>
510
511
512<li class="option" id="option-navigation">
513 <div class="option-header">
514 <h3 class="option-name"><a href="#option-navigation">navigation</a></h3>
515 <dl>
516 <dt class="option-type-label">Type:</dt>
517 <dd class="option-type">Boolean</dd>
518
519 <dt class="option-default-label">Default:</dt>
520 <dd class="option-default">false</dd>
521
522 </dl>
523 </div>
524 <div class="option-description">
525 <p>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.</p>
526 </div>
527 <div class="option-examples">
528 <h4>Code examples</h4>
529 <dl class="option-examples-list">
530
531<dt>
532 Initialize a accordion with the <code>navigation</code> option specified.
533</dt>
534<dd>
535<pre><code>$('.selector').accordion({ navigation: true });</code></pre>
536</dd>
537
538
539<dt>
540 Get or set the <code>navigation</code> option, after init.
541</dt>
542<dd>
543<pre><code>//getter
544var navigation = $('.selector').accordion('option', 'navigation');
545//setter
546$('.selector').accordion('option', 'navigation', true);</code></pre>
547</dd>
548
549 </dl>
550 </div>
551</li>
552
553
554<li class="option" id="option-navigationFilter">
555 <div class="option-header">
556 <h3 class="option-name"><a href="#option-navigationFilter">navigationFilter</a></h3>
557 <dl>
558 <dt class="option-type-label">Type:</dt>
559 <dd class="option-type">Function</dd>
560
561 <dt class="option-default-label">Default:</dt>
562 <dd class="option-default"> </dd>
563
564 </dl>
565 </div>
566 <div class="option-description">
567 <p>Overwrite the default location.href-matching with your own matcher.</p>
568 </div>
569 <div class="option-examples">
570 <h4>Code examples</h4>
571 <dl class="option-examples-list">
572
573<dt>
574 Initialize a accordion with the <code>navigationFilter</code> option specified.
575</dt>
576<dd>
577<pre><code>$('.selector').accordion({ navigationFilter: function(){ ... } });</code></pre>
578</dd>
579
580
581<dt>
582 Get or set the <code>navigationFilter</code> option, after init.
583</dt>
584<dd>
585<pre><code>//getter
586var navigationFilter = $('.selector').accordion('option', 'navigationFilter');
587//setter
588$('.selector').accordion('option', 'navigationFilter', function(){ ... });</code></pre>
589</dd>
590
591 </dl>
592 </div>
593</li>
594
595 </ul>
596 </div>
597 <div id="events">
598 <h2 class="top-header">Events</h2>
599 <ul class="events-list">
600
601<li class="event" id="event-change">
602 <div class="event-header">
603 <h3 class="event-name"><a href="#event-change">change</a></h3>
604 <dl>
605 <dt class="event-type-label">Type:</dt>
606 <dd class="event-type">accordionchange</dd>
607 </dl>
608 </div>
609 <div class="event-description">
610 <p>This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.
611</p>
612<pre>$('.ui-accordion').bind('accordionchange', function(event, ui) {
613 ui.newHeader // jQuery object, activated header
614 ui.oldHeader // jQuery object, previous header
615 ui.newContent // jQuery object, activated content
616 ui.oldContent // jQuery object, previous content
617});</pre></p>
618 </div>
619 <div class="event-examples">
620 <h4>Code examples</h4>
621 <dl class="event-examples-list">
622
623<dt>
624 Supply a callback function to handle the <code>change</code> event as an init option.
625</dt>
626<dd>
627<pre><code>$('.selector').accordion({
628 change: function(event, ui) { ... }
629});</code></pre>
630</dd>
631
632
633<dt>
634 Bind to the <code>change</code> event by type: <code>accordionchange</code>.
635</dt>
636<dd>
637<pre><code>$('.selector').bind('accordionchange', function(event, ui) {
638 ...
639});</code></pre>
640</dd>
641
642 </dl>
643 </div>
644</li>
645
646<p>
647<li class="event" id="event-changestart">
648 <div class="event-header">
649 <h3 class="event-name"><a href="#event-changestart">changestart</a></h3>
650 <dl>
651 <dt class="event-type-label">Type:</dt>
652 <dd class="event-type">accordionchangestart</dd>
653 </dl>
654 </div>
655 <div class="event-description">
656 <p>This event is triggered every time the accordion starts to change.
657</p>
658<pre>$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
659 ui.newHeader // jQuery object, activated header
660 ui.oldHeader // jQuery object, previous header
661 ui.newContent // jQuery object, activated content
662 ui.oldContent // jQuery object, previous content
663});</pre></p>
664 </div>
665 <div class="event-examples">
666 <h4>Code examples</h4>
667 <dl class="event-examples-list">
668
669<dt>
670 Supply a callback function to handle the <code>changestart</code> event as an init option.
671</dt>
672<dd>
673<pre><code>$('.selector').accordion({
674 changestart: function(event, ui) { ... }
675});</code></pre>
676</dd>
677
678
679<dt>
680 Bind to the <code>changestart</code> event by type: <code>accordionchangestart</code>.
681</dt>
682<dd>
683<pre><code>$('.selector').bind('accordionchangestart', function(event, ui) {
684 ...
685});</code></pre>
686</dd>
687
688 </dl>
689 </div>
690</li>
691
692 </ul>
693 </div>
694 <div id="methods">
695 <h2 class="top-header">Methods</h2>
696 <ul class="methods-list">
697
698<li class="method" id="method-destroy">
699 <div class="method-header">
700 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
701 <dl>
702 <dt class="method-signature-label">Signature:</dt>
703 <dd class="method-signature">.accordion( 'destroy'
704
705
706
707
708
709
710
711)</dd>
712 </dl>
713 </div>
714 <div class="method-description">
715 <p>Remove the accordion functionality completely. This will return the element back to its pre-init state.</p>
716 </div>
717</li>
718
719<p>
720<li class="method" id="method-disable">
721 <div class="method-header">
722 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
723 <dl>
724 <dt class="method-signature-label">Signature:</dt>
725 <dd class="method-signature">.accordion( 'disable'
726
727
728
729
730
731
732
733)</dd>
734 </dl>
735 </div>
736 <div class="method-description">
737 <p>Disable the accordion.</p>
738 </div>
739</li>
740
741
742<li class="method" id="method-enable">
743 <div class="method-header">
744 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
745 <dl>
746 <dt class="method-signature-label">Signature:</dt>
747 <dd class="method-signature">.accordion( 'enable'
748
749
750
751
752
753
754
755)</dd>
756 </dl>
757 </div>
758 <div class="method-description">
759 <p>Enable the accordion.</p>
760 </div>
761</li>
762
763
764<li class="method" id="method-option">
765 <div class="method-header">
766 <h3 class="method-name"><a href="#method-option">option</a></h3>
767 <dl>
768 <dt class="method-signature-label">Signature:</dt>
769 <dd class="method-signature">.accordion( 'option'
770
771, optionName
772
773, <span class="optional">[</span>value<span class="optional">] </span>
774
775
776
777)</dd>
778 </dl>
779 </div>
780 <div class="method-description">
781 <p>Get or set any accordion option. If no value is specified, will act as a getter.</p>
782 </div>
783</li>
784
785
786<li class="method" id="method-activate">
787 <div class="method-header">
788 <h3 class="method-name"><a href="#method-activate">activate</a></h3>
789 <dl>
790 <dt class="method-signature-label">Signature:</dt>
791 <dd class="method-signature">.accordion( 'activate'
792
793, index
794
795
796
797
798
799)</dd>
800 </dl>
801 </div>
802 <div class="method-description">
803 <p>Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass <code>false</code> to close all (only possible with <code>collapsible:true</code>).</p>
804 </div>
805</li>
806
807 </ul>
808 </div>
809 <div id="theming">
810 <h2 class="top-header">Theming</h2>
811 <p>The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
812</p>
813 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below.
814</p>
815
816 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
817 &lt;div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"&gt;<br />
818&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"&gt;<br />
819&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-s"/&gt;<br />
820&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 1&lt;/a&gt;<br />
821&nbsp;&nbsp;&lt;/h3&gt;<br />
822&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom <strong>ui-accordion-content-active</strong>"&gt;<br />
823&nbsp;&nbsp;&nbsp;&nbsp;Section 1 content<br />
824&nbsp;&nbsp;&lt;/div&gt;<br />
825&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
826&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
827&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 2&lt;/a&gt;<br />
828&nbsp;&nbsp;&lt;/h3&gt;<br />
829&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
830&nbsp;&nbsp;&nbsp;&nbsp;Section 2 content<br />
831&nbsp;&nbsp;&lt;/div&gt;<br />
832&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
833&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
834&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 3&lt;/a&gt;<br />
835&nbsp;&nbsp;&lt;/h3&gt;<br />
836&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
837&nbsp;&nbsp;&nbsp;&nbsp;Section 3 content<br />
838&nbsp;&nbsp;&lt;/div&gt;<br />
839&lt;/div&gt;<br />
840 <p class="theme-note">
841 <strong>
842 Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is <br />&lt;div&gt;<br />
843&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;<br />
844&#160;&#160;&#160;&lt;div&gt;<br />
845&#160;&#160;&#160;&#160;&#160;&#160;Section 1 content<br />
846&#160;&#160;&#160;&lt;/div&gt;<br />
847&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;<br />
848&#160;&#160;&#160;&lt;div&gt;<br />
849&#160;&#160;&#160;&#160;&#160;&#160;Section 2 content<br />
850&#160;&#160;&#160;&lt;/div&gt;<br />
851&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;<br />
852&#160;&#160;&#160;&lt;div&gt;<br />
853&#160;&#160;&#160;&#160;&#160;&#160;Section 3 content<br />
854&#160;&#160;&#160;&lt;/div&gt;<br />
855&lt;/div&gt;.
856 </strong>
857 </p>
858
859 </div>
860</div>
861
862</p><!--
863Pre-expand include size: 30823 bytes
864Post-expand include size: 55450 bytes
865Template argument size: 33373 bytes
866Maximum: 2097152 bytes
867-->
868
869<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3345-1!1!0!!en!2 and timestamp 20090604112216 -->
© 2015 Mike Crute