Make the selected elements Accordion widgets.
Semantic requirements:
The markup of your accordion container needs pairs of headers and content panels, grouped by another element. By default, the header elements are anchors, assuming the following structure:
<pre><div id="accordion">
<div>
<a href="#">First header</a>
<div>First content</div>
</div>
<div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
</div></pre>
If you use a different element for the header, specify the header-option with an appropiate selector, eg. header: "h3". The content element must be always next to it's header.
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".
Use activate(Number) to change the active content programmatically.
A "accordionchange" 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.
<pre>$(".ui-accordion").bind("accordionchange", function(event, ui) {
ui.options // options used to intialize this widget
ui.newHeader // jQuery, activated header
ui.oldHeader // jQuery, previous header
ui.newContent // jQuery, activated content
ui.oldContent // jQuery, previous content
});</pre>
A set of key/value pairs that configure the accordion. All options are optional.
String, Element, jQuery, Boolean, Number
Default: first child
Selector for the active element. Set to false to display none at start. Needs «alwaysOpen: false».
Boolean
Default: true
Whether there must be one content element open. Allows collapsing the active section by the triggering event (click is the default).
Boolean, String
Default: 'slide'
Choose your favorite animation, or disable them (set to false). In addition to the default, "bounceslide" and "easeslide" are supported (both require the easing plugin).
Boolean
Default: true
If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.
Boolean
Default: false
If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoheight.
String
Default: "click"
The event on which to trigger the accordion.
Boolean
Default: false
If set, the accordion completely fills the height of the parent element. Overrides autoheight.
String, Element, jQuery
Default: a
Selector for the header element.
Object
Default:
Icons to use for headers. Available icons are "header" and "headerSelected"
Boolean
Default: false
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.
Function
Default:
Overwrite the default location.href-matching with your own matcher.
String
Default: 'selected'
Class for active header elements.
A brief description of methods and their uses goes here so their use is clearly explained and any caveats can be mentioned up front.
Returns: jQuery
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 string expression matching an element. Pass -1 to close all (only possible with alwaysOpen:false).
index | String, Element, jQuery, Boolean, Number | An Integer specifying the zero-based index of the content to be activated or an expression specifying the element, or an element/jQuery object, or a boolean false to close all. |
$(".selector").accordion("activate", 1);
$(".selector").accordion("activate", false);
$(".selector").accordion("activate", "a:first");
Returns: jQuery
Enable the selected accordion.
Enabling an accordion reverts the change made by accordion("disable"), turning the behaviour back to the usual state.
$(".selector").accordion("enable")
Returns: jQuery
Disables the selected accordion.
Disabling an accordion turns off the ability to close or open anything in the accordion, it disables all interactions. To completely remove the accordion behaviour, including visual changes, use <a href='UI/Accordion/accordion#.22destroy.22'>accordion("destroy")</a>.
$(".selector").accordion("disable")
Returns: jQuery
Destroy the selected accordion.
Destroying the accordion completely reverts changes made by accordion), including events and styles. To just temporily disable the behaviour of an accordion, use <a href='UI/Accordion/accordion#.22disable.22'>accordion("disable")</a>.
$(".selector").accordion("disable")
ui.dialog uses the jQuery UI CSS styles framework for all major components, e.g. for the titlebar, the resize handle, etc., some of which are borrowed from ui.resizable.
Use the classes highlighted in bold to customize the dialog:
<div class="ui-dialog" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title" id="ui-dialog-title-1">Dialog Title</span>
<a href="#" class="ui-dialog-titlebar-close" role="button" title="Close">
<span class="ui-icon ui-icon-closethick">Close</span></a>
</div>
<div class="ui-dialog-content" style="height: 13em;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
</div>
<div class="ui-dialog-buttonpane">
<button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
<button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
<button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
</div>
<div class="ui-resizable-n ui-resizable-handle"></div>
<div class="ui-resizable-s ui-resizable-handle"></div>
<div class="ui-resizable-e ui-resizable-handle"></div>
<div class="ui-resizable-w ui-resizable-handle"></div>
<div class="ui-resizable-ne ui-resizable-handle"></div>
<div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
<div class="ui-resizable-sw ui-resizable-handle"></div>
<div class="ui-resizable-nw ui-resizable-handle"></div>
</div>