Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/docs/accordion.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
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:</p>
16 <pre>&lt;div id=&quot;accordion&quot;&gt;
17 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;First header&lt;/a&gt;&lt;/h3&gt;
18 &lt;div&gt;First content&lt;/div&gt;
19 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Second header&lt;/a&gt;&lt;/h3&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: 'a.header'. 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.8/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 Widget</li>
46 <li>UI Effects Core (Optional - only for non-default animations)</li>
47 </ul>
48 </div>
49 <div id="overview-example">
50 <h3>Example</h3>
51 <div id="overview-example" class="example">
52 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
53 <p><div id="demo" class="tabs-container" rel="310">
54 A simple jQuery UI Accordion.<br />
55 </p>
56 <pre>$(&quot;#accordion&quot;).accordion();
57 </pre>
58 <p></div><div id="source" class="tabs-container">
59 </p>
60 <pre>&lt;!DOCTYPE html&gt;
61 &lt;html&gt;
62 &lt;head&gt;
63 &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
64 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
65 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
66
67 &lt;script&gt;
68 $(document).ready(function() {
69 $(&quot;#accordion&quot;).accordion();
70 });
71 &lt;/script&gt;
72 &lt;/head&gt;
73 &lt;body style="font-size:62.5%;"&gt;
74
75 &lt;div id=&quot;accordion&quot;&gt;
76 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
77 &lt;div&gt;
78 &lt;p&gt;
79 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
80 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
81 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
82 odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
83 &lt;/p&gt;
84 &lt;/div&gt;
85 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
86 &lt;div&gt;
87 &lt;p&gt;
88 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
89 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
90 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
91 suscipit faucibus urna.
92 &lt;/p&gt;
93 &lt;/div&gt;
94 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;
95 &lt;div&gt;
96 &lt;p&gt;
97 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
98 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
99 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
100 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
101 &lt;/p&gt;
102 &lt;ul&gt;
103 &lt;li&gt;List item one&lt;/li&gt;
104 &lt;li&gt;List item two&lt;/li&gt;
105 &lt;li&gt;List item three&lt;/li&gt;
106 &lt;/ul&gt;
107 &lt;/div&gt;
108 &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 4&lt;/a&gt;&lt;/h3&gt;
109 &lt;div&gt;
110 &lt;p&gt;
111 Cras dictum. Pellentesque habitant morbi tristique senectus et netus
112 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
113 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
114 mauris vel est.
115 &lt;/p&gt;
116 &lt;p&gt;
117 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
118 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
119 inceptos himenaeos.
120 &lt;/p&gt;
121 &lt;/div&gt;
122 &lt;/div&gt;
123
124 &lt;/body&gt;
125 &lt;/html&gt;
126 </pre>
127 <p></div>
128 </p><p></div>
129 </div>
130 </div>
131 <div id="options">
132 <h2 class="top-header">Options</h2>
133 <ul class="options-list">
134
135 <li class="option" id="option-disabled">
136 <div class="option-header">
137 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
138 <dl>
139 <dt class="option-type-label">Type:</dt>
140 <dd class="option-type">Boolean</dd>
141
142 <dt class="option-default-label">Default:</dt>
143 <dd class="option-default">false</dd>
144
145 </dl>
146 </div>
147 <div class="option-description">
148 <p>Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.</p>
149 </div>
150 <div class="option-examples">
151 <h4>Code examples</h4>
152 <dl class="option-examples-list">
153
154 <dt>
155 Initialize a accordion with the <code>disabled</code> option specified.
156 </dt>
157 <dd>
158 <pre><code>$( ".selector" ).accordion({ disabled: true });</code></pre>
159 </dd>
160
161
162 <dt>
163 Get or set the <code>disabled</code> option, after init.
164 </dt>
165 <dd>
166 <pre><code>//getter
167 var disabled = $( ".selector" ).accordion( "option", "disabled" );
168 //setter
169 $( ".selector" ).accordion( "option", "disabled", true );</code></pre>
170 </dd>
171
172 </dl>
173 </div>
174 </li>
175
176
177 <li class="option" id="option-active">
178 <div class="option-header">
179 <h3 class="option-name"><a href="#option-active">active</a></h3>
180 <dl>
181 <dt class="option-type-label">Type:</dt>
182 <dd class="option-type">Selector, Element, jQuery, Boolean, Number</dd>
183
184 <dt class="option-default-label">Default:</dt>
185 <dd class="option-default">first child</dd>
186
187 </dl>
188 </div>
189 <div class="option-description">
190 <p>Selector for the active element. Set to false to display none at start. Needs <code>collapsible: true</code>.</p>
191 </div>
192 <div class="option-examples">
193 <h4>Code examples</h4>
194 <dl class="option-examples-list">
195
196 <dt>
197 Initialize a accordion with the <code>active</code> option specified.
198 </dt>
199 <dd>
200 <pre><code>$( ".selector" ).accordion({ active: 2 });</code></pre>
201 </dd>
202
203
204 <dt>
205 Get or set the <code>active</code> option, after init.
206 </dt>
207 <dd>
208 <pre><code>//getter
209 var active = $( ".selector" ).accordion( "option", "active" );
210 //setter
211 $( ".selector" ).accordion( "option", "active", 2 );</code></pre>
212 </dd>
213
214 </dl>
215 </div>
216 </li>
217
218
219 <li class="option" id="option-animated">
220 <div class="option-header">
221 <h3 class="option-name"><a href="#option-animated">animated</a></h3>
222 <dl>
223 <dt class="option-type-label">Type:</dt>
224 <dd class="option-type">Boolean, String</dd>
225
226 <dt class="option-default-label">Default:</dt>
227 <dd class="option-default">'slide'</dd>
228
229 </dl>
230 </div>
231 <div class="option-description">
232 <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>
233 </div>
234 <div class="option-examples">
235 <h4>Code examples</h4>
236 <dl class="option-examples-list">
237
238 <dt>
239 Initialize a accordion with the <code>animated</code> option specified.
240 </dt>
241 <dd>
242 <pre><code>$( ".selector" ).accordion({ animated: 'bounceslide' });</code></pre>
243 </dd>
244
245
246 <dt>
247 Get or set the <code>animated</code> option, after init.
248 </dt>
249 <dd>
250 <pre><code>//getter
251 var animated = $( ".selector" ).accordion( "option", "animated" );
252 //setter
253 $( ".selector" ).accordion( "option", "animated", 'bounceslide' );</code></pre>
254 </dd>
255
256 </dl>
257 </div>
258 </li>
259
260
261 <li class="option" id="option-autoHeight">
262 <div class="option-header">
263 <h3 class="option-name"><a href="#option-autoHeight">autoHeight</a></h3>
264 <dl>
265 <dt class="option-type-label">Type:</dt>
266 <dd class="option-type">Boolean</dd>
267
268 <dt class="option-default-label">Default:</dt>
269 <dd class="option-default">true</dd>
270
271 </dl>
272 </div>
273 <div class="option-description">
274 <p>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</p>
275 </div>
276 <div class="option-examples">
277 <h4>Code examples</h4>
278 <dl class="option-examples-list">
279
280 <dt>
281 Initialize a accordion with the <code>autoHeight</code> option specified.
282 </dt>
283 <dd>
284 <pre><code>$( ".selector" ).accordion({ autoHeight: false });</code></pre>
285 </dd>
286
287
288 <dt>
289 Get or set the <code>autoHeight</code> option, after init.
290 </dt>
291 <dd>
292 <pre><code>//getter
293 var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
294 //setter
295 $( ".selector" ).accordion( "option", "autoHeight", false );</code></pre>
296 </dd>
297
298 </dl>
299 </div>
300 </li>
301
302
303 <li class="option" id="option-clearStyle">
304 <div class="option-header">
305 <h3 class="option-name"><a href="#option-clearStyle">clearStyle</a></h3>
306 <dl>
307 <dt class="option-type-label">Type:</dt>
308 <dd class="option-type">Boolean</dd>
309
310 <dt class="option-default-label">Default:</dt>
311 <dd class="option-default">false</dd>
312
313 </dl>
314 </div>
315 <div class="option-description">
316 <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>
317 </div>
318 <div class="option-examples">
319 <h4>Code examples</h4>
320 <dl class="option-examples-list">
321
322 <dt>
323 Initialize a accordion with the <code>clearStyle</code> option specified.
324 </dt>
325 <dd>
326 <pre><code>$( ".selector" ).accordion({ clearStyle: true });</code></pre>
327 </dd>
328
329
330 <dt>
331 Get or set the <code>clearStyle</code> option, after init.
332 </dt>
333 <dd>
334 <pre><code>//getter
335 var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
336 //setter
337 $( ".selector" ).accordion( "option", "clearStyle", true );</code></pre>
338 </dd>
339
340 </dl>
341 </div>
342 </li>
343
344
345 <li class="option" id="option-collapsible">
346 <div class="option-header">
347 <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
348 <dl>
349 <dt class="option-type-label">Type:</dt>
350 <dd class="option-type">Boolean</dd>
351
352 <dt class="option-default-label">Default:</dt>
353 <dd class="option-default">false</dd>
354
355 </dl>
356 </div>
357 <div class="option-description">
358 <p>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</p>
359 </div>
360 <div class="option-examples">
361 <h4>Code examples</h4>
362 <dl class="option-examples-list">
363
364 <dt>
365 Initialize a accordion with the <code>collapsible</code> option specified.
366 </dt>
367 <dd>
368 <pre><code>$( ".selector" ).accordion({ collapsible: true });</code></pre>
369 </dd>
370
371
372 <dt>
373 Get or set the <code>collapsible</code> option, after init.
374 </dt>
375 <dd>
376 <pre><code>//getter
377 var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
378 //setter
379 $( ".selector" ).accordion( "option", "collapsible", true );</code></pre>
380 </dd>
381
382 </dl>
383 </div>
384 </li>
385
386
387 <li class="option" id="option-event">
388 <div class="option-header">
389 <h3 class="option-name"><a href="#option-event">event</a></h3>
390 <dl>
391 <dt class="option-type-label">Type:</dt>
392 <dd class="option-type">String</dd>
393
394 <dt class="option-default-label">Default:</dt>
395 <dd class="option-default">'click'</dd>
396
397 </dl>
398 </div>
399 <div class="option-description">
400 <p>The event on which to trigger the accordion.</p>
401 </div>
402 <div class="option-examples">
403 <h4>Code examples</h4>
404 <dl class="option-examples-list">
405
406 <dt>
407 Initialize a accordion with the <code>event</code> option specified.
408 </dt>
409 <dd>
410 <pre><code>$( ".selector" ).accordion({ event: 'mouseover' });</code></pre>
411 </dd>
412
413
414 <dt>
415 Get or set the <code>event</code> option, after init.
416 </dt>
417 <dd>
418 <pre><code>//getter
419 var event = $( ".selector" ).accordion( "option", "event" );
420 //setter
421 $( ".selector" ).accordion( "option", "event", 'mouseover' );</code></pre>
422 </dd>
423
424 </dl>
425 </div>
426 </li>
427
428
429 <li class="option" id="option-fillSpace">
430 <div class="option-header">
431 <h3 class="option-name"><a href="#option-fillSpace">fillSpace</a></h3>
432 <dl>
433 <dt class="option-type-label">Type:</dt>
434 <dd class="option-type">Boolean</dd>
435
436 <dt class="option-default-label">Default:</dt>
437 <dd class="option-default">false</dd>
438
439 </dl>
440 </div>
441 <div class="option-description">
442 <p>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</p>
443 </div>
444 <div class="option-examples">
445 <h4>Code examples</h4>
446 <dl class="option-examples-list">
447
448 <dt>
449 Initialize a accordion with the <code>fillSpace</code> option specified.
450 </dt>
451 <dd>
452 <pre><code>$( ".selector" ).accordion({ fillSpace: true });</code></pre>
453 </dd>
454
455
456 <dt>
457 Get or set the <code>fillSpace</code> option, after init.
458 </dt>
459 <dd>
460 <pre><code>//getter
461 var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
462 //setter
463 $( ".selector" ).accordion( "option", "fillSpace", true );</code></pre>
464 </dd>
465
466 </dl>
467 </div>
468 </li>
469
470
471 <li class="option" id="option-header">
472 <div class="option-header">
473 <h3 class="option-name"><a href="#option-header">header</a></h3>
474 <dl>
475 <dt class="option-type-label">Type:</dt>
476 <dd class="option-type">Selector, jQuery</dd>
477
478 <dt class="option-default-label">Default:</dt>
479 <dd class="option-default">'&gt; li &gt;&nbsp;:first-child,&gt;&nbsp;:not(li):even'</dd>
480
481 </dl>
482 </div>
483 <div class="option-description">
484 <p>Selector for the header element.</p>
485 </div>
486 <div class="option-examples">
487 <h4>Code examples</h4>
488 <dl class="option-examples-list">
489
490 <dt>
491 Initialize a accordion with the <code>header</code> option specified.
492 </dt>
493 <dd>
494 <pre><code>$( ".selector" ).accordion({ header: 'h3' });</code></pre>
495 </dd>
496
497
498 <dt>
499 Get or set the <code>header</code> option, after init.
500 </dt>
501 <dd>
502 <pre><code>//getter
503 var header = $( ".selector" ).accordion( "option", "header" );
504 //setter
505 $( ".selector" ).accordion( "option", "header", 'h3' );</code></pre>
506 </dd>
507
508 </dl>
509 </div>
510 </li>
511
512
513 <li class="option" id="option-icons">
514 <div class="option-header">
515 <h3 class="option-name"><a href="#option-icons">icons</a></h3>
516 <dl>
517 <dt class="option-type-label">Type:</dt>
518 <dd class="option-type">Object</dd>
519
520 <dt class="option-default-label">Default:</dt>
521 <dd class="option-default">{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }</dd>
522
523 </dl>
524 </div>
525 <div class="option-description">
526 <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>
527 </div>
528 <div class="option-examples">
529 <h4>Code examples</h4>
530 <dl class="option-examples-list">
531
532 <dt>
533 Initialize a accordion with the <code>icons</code> option specified.
534 </dt>
535 <dd>
536 <pre><code>$( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });</code></pre>
537 </dd>
538
539
540 <dt>
541 Get or set the <code>icons</code> option, after init.
542 </dt>
543 <dd>
544 <pre><code>//getter
545 var icons = $( ".selector" ).accordion( "option", "icons" );
546 //setter
547 $( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );</code></pre>
548 </dd>
549
550 </dl>
551 </div>
552 </li>
553
554
555 <li class="option" id="option-navigation">
556 <div class="option-header">
557 <h3 class="option-name"><a href="#option-navigation">navigation</a></h3>
558 <dl>
559 <dt class="option-type-label">Type:</dt>
560 <dd class="option-type">Boolean</dd>
561
562 <dt class="option-default-label">Default:</dt>
563 <dd class="option-default">false</dd>
564
565 </dl>
566 </div>
567 <div class="option-description">
568 <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>
569 </div>
570 <div class="option-examples">
571 <h4>Code examples</h4>
572 <dl class="option-examples-list">
573
574 <dt>
575 Initialize a accordion with the <code>navigation</code> option specified.
576 </dt>
577 <dd>
578 <pre><code>$( ".selector" ).accordion({ navigation: true });</code></pre>
579 </dd>
580
581
582 <dt>
583 Get or set the <code>navigation</code> option, after init.
584 </dt>
585 <dd>
586 <pre><code>//getter
587 var navigation = $( ".selector" ).accordion( "option", "navigation" );
588 //setter
589 $( ".selector" ).accordion( "option", "navigation", true );</code></pre>
590 </dd>
591
592 </dl>
593 </div>
594 </li>
595
596
597 <li class="option" id="option-navigationFilter">
598 <div class="option-header">
599 <h3 class="option-name"><a href="#option-navigationFilter">navigationFilter</a></h3>
600 <dl>
601 <dt class="option-type-label">Type:</dt>
602 <dd class="option-type">Function</dd>
603
604 <dt class="option-default-label">Default:</dt>
605 <dd class="option-default"> </dd>
606
607 </dl>
608 </div>
609 <div class="option-description">
610 <p>Overwrite the default location.href-matching with your own matcher.</p>
611 </div>
612 <div class="option-examples">
613 <h4>Code examples</h4>
614 <dl class="option-examples-list">
615
616 <dt>
617 Initialize a accordion with the <code>navigationFilter</code> option specified.
618 </dt>
619 <dd>
620 <pre><code>$( ".selector" ).accordion({ navigationFilter: function(){ ... } });</code></pre>
621 </dd>
622
623
624 <dt>
625 Get or set the <code>navigationFilter</code> option, after init.
626 </dt>
627 <dd>
628 <pre><code>//getter
629 var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" );
630 //setter
631 $( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );</code></pre>
632 </dd>
633
634 </dl>
635 </div>
636 </li>
637
638 </ul>
639 </div>
640 <div id="events">
641 <h2 class="top-header">Events</h2>
642 <ul class="events-list">
643
644 <li class="event" id="event-create">
645 <div class="event-header">
646 <h3 class="event-name"><a href="#event-create">create</a></h3>
647 <dl>
648 <dt class="event-type-label">Type:</dt>
649 <dd class="event-type">accordioncreate</dd>
650 </dl>
651 </div>
652 <div class="event-description">
653 <p>This event is triggered when accordion is created.</p>
654 </div>
655 <div class="event-examples">
656 <h4>Code examples</h4>
657 <dl class="event-examples-list">
658
659 <dt>
660 Supply a callback function to handle the <code>create</code> event as an init option.
661 </dt>
662 <dd>
663 <pre><code>$( &quot;.selector&quot; ).accordion({
664 create: function(event, ui) { ... }
665 });</code></pre>
666 </dd>
667
668
669 <dt>
670 Bind to the <code>create</code> event by type: <code>accordioncreate</code>.
671 </dt>
672 <dd>
673 <pre><code>$( &quot;.selector&quot; ).bind( &quot;accordioncreate&quot;, function(event, ui) {
674 ...
675 });</code></pre>
676 </dd>
677
678 </dl>
679 </div>
680 </li>
681
682
683 <li class="event" id="event-change">
684 <div class="event-header">
685 <h3 class="event-name"><a href="#event-change">change</a></h3>
686 <dl>
687 <dt class="event-type-label">Type:</dt>
688 <dd class="event-type">accordionchange</dd>
689 </dl>
690 </div>
691 <div class="event-description">
692 <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.
693 </p>
694 <pre>$('.ui-accordion').bind('accordionchange', function(event, ui) {
695 ui.newHeader // jQuery object, activated header
696 ui.oldHeader // jQuery object, previous header
697 ui.newContent // jQuery object, activated content
698 ui.oldContent // jQuery object, previous content
699 });</pre></p>
700 </div>
701 <div class="event-examples">
702 <h4>Code examples</h4>
703 <dl class="event-examples-list">
704
705 <dt>
706 Supply a callback function to handle the <code>change</code> event as an init option.
707 </dt>
708 <dd>
709 <pre><code>$( &quot;.selector&quot; ).accordion({
710 change: function(event, ui) { ... }
711 });</code></pre>
712 </dd>
713
714
715 <dt>
716 Bind to the <code>change</code> event by type: <code>accordionchange</code>.
717 </dt>
718 <dd>
719 <pre><code>$( &quot;.selector&quot; ).bind( &quot;accordionchange&quot;, function(event, ui) {
720 ...
721 });</code></pre>
722 </dd>
723
724 </dl>
725 </div>
726 </li>
727
728 <p>
729 <li class="event" id="event-changestart">
730 <div class="event-header">
731 <h3 class="event-name"><a href="#event-changestart">changestart</a></h3>
732 <dl>
733 <dt class="event-type-label">Type:</dt>
734 <dd class="event-type">accordionchangestart</dd>
735 </dl>
736 </div>
737 <div class="event-description">
738 <p>This event is triggered every time the accordion starts to change.
739 </p>
740 <pre>$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
741 ui.newHeader // jQuery object, activated header
742 ui.oldHeader // jQuery object, previous header
743 ui.newContent // jQuery object, activated content
744 ui.oldContent // jQuery object, previous content
745 });</pre></p>
746 </div>
747 <div class="event-examples">
748 <h4>Code examples</h4>
749 <dl class="event-examples-list">
750
751 <dt>
752 Supply a callback function to handle the <code>changestart</code> event as an init option.
753 </dt>
754 <dd>
755 <pre><code>$( &quot;.selector&quot; ).accordion({
756 changestart: function(event, ui) { ... }
757 });</code></pre>
758 </dd>
759
760
761 <dt>
762 Bind to the <code>changestart</code> event by type: <code>accordionchangestart</code>.
763 </dt>
764 <dd>
765 <pre><code>$( &quot;.selector&quot; ).bind( &quot;accordionchangestart&quot;, function(event, ui) {
766 ...
767 });</code></pre>
768 </dd>
769
770 </dl>
771 </div>
772 </li>
773
774 </ul>
775 </div>
776 <div id="methods">
777 <h2 class="top-header">Methods</h2>
778 <ul class="methods-list">
779
780 <li class="method" id="method-destroy">
781 <div class="method-header">
782 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
783 <dl>
784 <dt class="method-signature-label">Signature:</dt>
785 <dd class="method-signature">.accordion( "destroy"
786
787
788
789
790
791
792
793 )</dd>
794 </dl>
795 </div>
796 <div class="method-description">
797 <p>Remove the accordion functionality completely. This will return the element back to its pre-init state.</p>
798 </div>
799 </li>
800
801 <p>
802 <li class="method" id="method-disable">
803 <div class="method-header">
804 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
805 <dl>
806 <dt class="method-signature-label">Signature:</dt>
807 <dd class="method-signature">.accordion( "disable"
808
809
810
811
812
813
814
815 )</dd>
816 </dl>
817 </div>
818 <div class="method-description">
819 <p>Disable the accordion.</p>
820 </div>
821 </li>
822
823
824 <li class="method" id="method-enable">
825 <div class="method-header">
826 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
827 <dl>
828 <dt class="method-signature-label">Signature:</dt>
829 <dd class="method-signature">.accordion( "enable"
830
831
832
833
834
835
836
837 )</dd>
838 </dl>
839 </div>
840 <div class="method-description">
841 <p>Enable the accordion.</p>
842 </div>
843 </li>
844
845
846 <li class="method" id="method-option">
847 <div class="method-header">
848 <h3 class="method-name"><a href="#method-option">option</a></h3>
849 <dl>
850 <dt class="method-signature-label">Signature:</dt>
851 <dd class="method-signature">.accordion( "option"
852
853 , optionName
854
855 , <span class="optional">[</span>value<span class="optional">] </span>
856
857
858
859 )</dd>
860 </dl>
861 </div>
862 <div class="method-description">
863 <p>Get or set any accordion option. If no value is specified, will act as a getter.</p>
864 </div>
865 </li>
866
867
868 <li class="method" id="method-option">
869 <div class="method-header">
870 <h3 class="method-name"><a href="#method-option">option</a></h3>
871 <dl>
872 <dt class="method-signature-label">Signature:</dt>
873 <dd class="method-signature">.accordion( "option"
874
875 , options
876
877
878
879
880
881 )</dd>
882 </dl>
883 </div>
884 <div class="method-description">
885 <p>Set multiple accordion options at once by providing an options object.</p>
886 </div>
887 </li>
888
889
890 <li class="method" id="method-widget">
891 <div class="method-header">
892 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
893 <dl>
894 <dt class="method-signature-label">Signature:</dt>
895 <dd class="method-signature">.accordion( "widget"
896
897
898
899
900
901
902
903 )</dd>
904 </dl>
905 </div>
906 <div class="method-description">
907 <p>Returns the .ui-accordion element.</p>
908 </div>
909 </li>
910
911
912 <li class="method" id="method-activate">
913 <div class="method-header">
914 <h3 class="method-name"><a href="#method-activate">activate</a></h3>
915 <dl>
916 <dt class="method-signature-label">Signature:</dt>
917 <dd class="method-signature">.accordion( "activate"
918
919 , index
920
921
922
923
924
925 )</dd>
926 </dl>
927 </div>
928 <div class="method-description">
929 <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>
930 </div>
931 </li>
932
933
934 <li class="method" id="method-resize">
935 <div class="method-header">
936 <h3 class="method-name"><a href="#method-resize">resize</a></h3>
937 <dl>
938 <dt class="method-signature-label">Signature:</dt>
939 <dd class="method-signature">.accordion( "resize"
940
941
942
943
944
945
946
947 )</dd>
948 </dl>
949 </div>
950 <div class="method-description">
951 <p>Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.</p>
952 </div>
953 </li>
954
955 </ul>
956 </div>
957 <div id="theming">
958 <h2 class="top-header">Theming</h2>
959 <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.
960 </p>
961 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below.
962 </p>
963
964 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
965 &lt;div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"&gt;<br />
966 &nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"&gt;<br />
967 &nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-s"/&gt;<br />
968 &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 1&lt;/a&gt;<br />
969 &nbsp;&nbsp;&lt;/h3&gt;<br />
970 &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 />
971 &nbsp;&nbsp;&nbsp;&nbsp;Section 1 content<br />
972 &nbsp;&nbsp;&lt;/div&gt;<br />
973 &nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
974 &nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
975 &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 2&lt;/a&gt;<br />
976 &nbsp;&nbsp;&lt;/h3&gt;<br />
977 &nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
978 &nbsp;&nbsp;&nbsp;&nbsp;Section 2 content<br />
979 &nbsp;&nbsp;&lt;/div&gt;<br />
980 &nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
981 &nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
982 &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 3&lt;/a&gt;<br />
983 &nbsp;&nbsp;&lt;/h3&gt;<br />
984 &nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
985 &nbsp;&nbsp;&nbsp;&nbsp;Section 3 content<br />
986 &nbsp;&nbsp;&lt;/div&gt;<br />
987 &lt;/div&gt;<br />
988 <p class="theme-note">
989 <strong>
990 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 />
991 &#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;<br />
992 &#160;&#160;&#160;&lt;div&gt;<br />
993 &#160;&#160;&#160;&#160;&#160;&#160;Section 1 content<br />
994 &#160;&#160;&#160;&lt;/div&gt;<br />
995 &#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;<br />
996 &#160;&#160;&#160;&lt;div&gt;<br />
997 &#160;&#160;&#160;&#160;&#160;&#160;Section 2 content<br />
998 &#160;&#160;&#160;&lt;/div&gt;<br />
999 &#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;<br />
1000 &#160;&#160;&#160;&lt;div&gt;<br />
1001 &#160;&#160;&#160;&#160;&#160;&#160;Section 3 content<br />
1002 &#160;&#160;&#160;&lt;/div&gt;<br />
1003 &lt;/div&gt;.
1004 </strong>
1005 </p>
1006
1007 </div>
1008 </div>
1009
1010 </p><!--
1011 Pre-expand include size: 38033 bytes
1012 Post-expand include size: 63819 bytes
1013 Template argument size: 35523 bytes
1014 Maximum: 2097152 bytes
1015 -->
1016
1017 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3773-1!1!0!!en!2 and timestamp 20110315194429 -->