| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
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><div id="accordion"> 17 <a href="#">First header</a> 18 <div>First content</div> 19 <a href="#">Second header</a> 20 <div>Second content</div> 21 </div></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"> 53 A simple jQuery UI Accordion.<br /> 54 </p> 55 <pre>$("#accordion").accordion(); 56 </pre> 57 <p></div><div id="source" class="tabs-container"> 58 </p> 59 <pre><!DOCTYPE html> 60 <html> 61 <head> 62 <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 63 <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 64 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 65 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script> 66 <script type="text/javascript"> 67 $(document).ready(function(){ 68 $("#accordion").accordion(); 69 }); 70 </script> 71 </head> 72 <body style="font-size:62.5%;"> 73 74 <div id="accordion"> 75 <h3><a href="#">Section 1</a></h3> 76 <div> 77 <p> 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 </p> 83 </div> 84 <h3><a href="#">Section 2</a></h3> 85 <div> 86 <p> 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 </p> 92 </div> 93 <h3><a href="#">Section 3</a></h3> 94 <div> 95 <p> 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 </p> 101 <ul> 102 <li>List item one</li> 103 <li>List item two</li> 104 <li>List item three</li> 105 </ul> 106 </div> 107 <h3><a href="#">Section 4</a></h3> 108 <div> 109 <p> 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 </p> 115 <p> 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 </p> 120 </div> 121 </div> 122 123 </body> 124 </html> 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 166 var 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 208 var 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 250 var 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 292 var 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 334 var 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 376 var 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 418 var 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">'> li > :first-child,> :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 460 var 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 502 var 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 544 var 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 586 var 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 <div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"><br /> 818 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"><br /> 819 <span class="ui-icon ui-icon-triangle-1-s"/><br /> 820 <a href="#">Section 1</a><br /> 821 </h3><br /> 822 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom <strong>ui-accordion-content-active</strong>"><br /> 823 Section 1 content<br /> 824 </div><br /> 825 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br /> 826 <span class="ui-icon ui-icon-triangle-1-e"/><br /> 827 <a href="#">Section 2</a><br /> 828 </h3><br /> 829 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br /> 830 Section 2 content<br /> 831 </div><br /> 832 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br /> 833 <span class="ui-icon ui-icon-triangle-1-e"/><br /> 834 <a href="#">Section 3</a><br /> 835 </h3><br /> 836 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br /> 837 Section 3 content<br /> 838 </div><br /> 839 </div><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 /><div><br /> 843    <h3><a href="#">Section 1</a></h3><br /> 844    <div><br /> 845       Section 1 content<br /> 846    </div><br /> 847    <h3><a href="#">Section 2</a></h3><br /> 848    <div><br /> 849       Section 2 content<br /> 850    </div><br /> 851    <h3><a href="#">Section 3</a></h3><br /> 852    <div><br /> 853       Section 3 content<br /> 854    </div><br /> 855 </div>. 856 </strong> 857 </p> 858 859 </div> 860 </div> 861 862 </p><!-- 863 Pre-expand include size: 30823 bytes 864 Post-expand include size: 55450 bytes 865 Template argument size: 33373 bytes 866 Maximum: 2097152 bytes 867 --> 868 869 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3345-1!1!0!!en!2 and timestamp 20090604112216 -->
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |