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>&lt;div id="accordion"&gt; &lt;div&gt; &lt;a href="#"&gt;First header&lt;/a&gt; &lt;div&gt;First content&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;a href="#"&gt;Second header&lt;/a&gt; &lt;div&gt;Second content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</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.

Property options

Show details | Hide details

active

String, Element, jQuery, Boolean, Number

Default: first child

Selector for the active element. Set to false to display none at start. Needs &laquo;alwaysOpen: false&raquo;.

alwaysOpen

Boolean

Default: true

Whether there must be one content element open. Allows collapsing the active section by the triggering event (click is the default).

animated

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).

autoHeight

Boolean

Default: true

If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.

clearStyle

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.

event

String

Default: "click"

The event on which to trigger the accordion.

fillSpace

Boolean

Default: false

If set, the accordion completely fills the height of the parent element. Overrides autoheight.

header

String, Element, jQuery

Default: a

Selector for the header element.

icons

Object

Default:

Icons to use for headers. Available icons are "header" and "headerSelected"

navigation

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.

navigationFilter

Function

Default:

Overwrite the default location.href-matching with your own matcher.

selectedClass

String

Default: 'selected'

Class for active header elements.

Event options

Show details | Hide details

A brief description of methods and their uses goes here so their use is clearly explained and any caveats can be mentioned up front.

accordion( "activate", index )

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).

Arguments:

indexString, Element, jQuery, Boolean, NumberAn 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.

Code sample:

Activate the second content panel.
$(".selector").accordion("activate", 1);
Close all content parts of the accordion.
$(".selector").accordion("activate", false);
Activate the first element matching the given expression.
$(".selector").accordion("activate", "a:first");

accordion( "enable" )

Returns: jQuery

Enable the selected accordion.

Enabling an accordion reverts the change made by accordion("disable"), turning the behaviour back to the usual state.

Arguments:

Code sample:

Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("enable")

accordion( "disable" )

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>.

Arguments:

Code sample:

Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("disable")

accordion( "destroy" )

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>.

Arguments:

Code sample:

Activate the second content of the Accordion contained in <div id="accordion">.
$(".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.

Sample code with CSS classes

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>

See also