source: tapas/web/resources/js/library/jquery-ui-1.8.16.custom/development-bundle/docs/accordion.html @ 416

Last change on this file since 416 was 416, checked in by vmipsl, 12 years ago

User : ajout laboratoire & pays
BO : idem
Création compte : idem
DataProtocole?
Clean accent properties
Language
File size: 29.9 KB
Line 
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">
54A 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.5/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
167var 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
209var 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
251var 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
293var 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
335var 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
377var 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
419var 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
461var 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
503var 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
545var 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
587var 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
629var 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><!--
1011Pre-expand include size: 38033 bytes
1012Post-expand include size: 63819 bytes
1013Template argument size: 35523 bytes
1014Maximum: 2097152 bytes
1015-->
1016
1017<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3773-1!1!0!!en!2 and timestamp 20110815120741 -->
Note: See TracBrowser for help on using the repository browser.