accordion.xml

<?xml version="1.0"?>
<entry name="accordion" type="widget" widget-element="accordion">
	<title>Accordion Widget</title>
	<desc>Convert a pair of headers and content panels into an accordion.</desc>
	<longdesc>
		<p>The markup of your accordion container needs pairs of headers and content panels:</p>

		<pre><code data-linenum="true"><![CDATA[
<div id="accordion">
	<h3>First header</h3>
	<div>First content panel</div>
	<h3>Second header</h3>
	<div>Second content panel</div>
</div>
]]></code></pre>

		<p>Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the <a href="#option-header"><code>header</code></a> option for information on how to use custom markup structures.</p>
		<p>The panels can be activated programmatically by setting the <a href="#option-active"><code>active</code></a> option.</p>

		<h3>Keyboard interaction</h3>

		<p>When focus is on a header, the following key commands are available:</p>
		<ul>
			<li>UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.</li>
			<li>DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.</li>
			<li>HOME - Move focus to the first header.</li>
			<li>END - Move focus to the last header.</li>
			<li>SPACE/ENTER - Activate panel associated with focused header.</li>
		</ul>

		<p>When focus is in a panel:</p>
		<ul>
			<li>CTRL+UP: Move focus to associated header.</li>
		</ul>

		<h3>Dependencies</h3>
		<ul>
			<li><a href="/category/ui-core/">UI Core</a></li>
			<li><a href="/jQuery.widget/">Widget Factory</a></li>
			<li><a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-animate"><code>animate</code></a> option)</li>
		</ul>
	</longdesc>
	<note id="functional-css"/>
	<added>1.0</added>
	<options>
		<option name="active" default="0" example-value="2">
			<desc>
				Which panel is currently open.
			</desc>
			<type name="Boolean">
				<desc>Setting <code>active</code> to <code>false</code> will collapse all panels. This requires the <a href="#option-collapsible"><code>collapsible</code></a> option to be <code>true</code>.</desc>
			</type>
			<type name="Integer">
				<desc>The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.</desc>
			</type>
		</option>
		<option name="animate" default="{}" example-value='"bounceslide"'>
			<desc>If and how to animate changing panels.</desc>
			<type name="Boolean">
				<desc>A value of <code>false</code> will disable animations.</desc>
			</type>
			<type name="Number">
				<desc>Duration in milliseconds with default easing.</desc>
			</type>
			<type name="String">
				<desc>Name of <a href="/easings/">easing</a> to use with default duration.</desc>
			</type>
			<type name="Object">
				<desc>Animation settings with <code>easing</code> and <code>duration</code> properties.
					<ul>
						<li>Can also contain a <code>down</code> property with any of the above options.</li>
						<li>"Down" animations occur when the panel being activated has a lower index than the currently active panel.</li>
					</ul>
				</desc>
			</type>
		</option>
		<option name="collapsible" type="Boolean" default="false" example-value="true">
			<desc>Whether all the sections can be closed at once. Allows collapsing the active section.</desc>
		</option>
		<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<option name="event" type="String" default='"click"' example-value='"mouseover"'>
			<desc>The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.</desc>
		</option>
		<option name="header" type="Selector" default='"> li > :first-child,> :not(li):even"' example-value='"h3"'>
			<desc>
				<p>Selector for the header element, applied via <code>.find()</code> on the main accordion element. Content panels must be the sibling immedately after their associated headers.</p>
			</desc>
		</option>
		<option name="heightStyle" type="String" default='"auto"' example-value='"fill"'>
			<desc>
				<p>Controls the height of the accordion and each panel. Possible values:</p>
				<ul>
					<li><code>"auto"</code>: All panels will be set to the height of the tallest panel.</li>
					<li><code>"fill"</code>: Expand to the available height based on the accordion's parent height.</li>
					<li><code>"content"</code>: Each panel will be only as tall as its content.</li>
				</ul>
			</desc>
		</option>
		<option name="icons" type="Object" default='{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }' example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
			<desc>
				<p>Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to <code>false</code> to have no icons displayed.</p>
				<ul>
					<li>header (string, default: "ui-icon-triangle-1-e")</li>
					<li>activeHeader (string, default: "ui-icon-triangle-1-s")</li>
				</ul>
			</desc>
		</option>
	</options>
	<events>
		<event name="activate">
			<desc>Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, <code>ui.oldHeader</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the accordion is collapsing, <code>ui.newHeader</code> and <code>ui.newPanel</code> will be empty jQuery objects.</desc>
			<argument name="event" type="Event"/>
			<argument name="ui" type="Object">
				<property name="newHeader" type="jQuery">
					<desc>The header that was just activated.</desc>
				</property>
				<property name="oldHeader" type="jQuery">
					<desc>The header that was just deactivated.</desc>
				</property>
				<property name="newPanel" type="jQuery">
					<desc>The panel that was just activated.</desc>
				</property>
				<property name="oldPanel" type="jQuery">
					<desc>The panel that was just deactivated.</desc>
				</property>
			</argument>
		</event>
		<event name="beforeActivate">
			<desc>Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. If the accordion is currently collapsed, <code>ui.oldHeader</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the accordion is collapsing, <code>ui.newHeader</code> and <code>ui.newPanel</code> will be empty jQuery objects.</desc>
			<argument name="event" type="Event"/>
			<argument name="ui" type="Object">
				<property name="newHeader" type="jQuery">
					<desc>The header that is about to be activated.</desc>
				</property>
				<property name="oldHeader" type="jQuery">
					<desc>The header that is about to be deactivated.</desc>
				</property>
				<property name="newPanel" type="jQuery">
					<desc>The panel that is about to be activated.</desc>
				</property>
				<property name="oldPanel" type="jQuery">
					<desc>The panel that is about to be deactivated.</desc>
				</property>
			</argument>
		</event>
		<event name="create">
			<desc>Triggered when the accordion is created. If the accordion is collapsed, <code>ui.header</code> and <code>ui.panel</code> will be empty jQuery objects.</desc>
			<argument name="event" type="Event"/>
			<argument name="ui" type="Object">
				<property name="header" type="jQuery">
					<desc>The active header.</desc>
				</property>
				<property name="panel" type="jQuery">
					<desc>The active panel.</desc>
				</property>
			</argument>
		</event>
	</events>
	<methods>
		<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
		<method name="refresh">
			<desc>Recompute the height of the accordion panels. Results depend on the content and the <a href="#option-heightStyle"><code>heightStyle</code></a> option.</desc>
		</method>
		<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
	</methods>
	<example>
		<height>350</height>
		<desc>A simple jQuery UI Accordion</desc>
		<code><![CDATA[
$( "#accordion" ).accordion();
]]></code>
		<html><![CDATA[
<div id="accordion">
	<h3>Section 1</h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
		Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
		condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
		Nam mi. Proin viverra leo ut odio.</p>
	</div>
	<h3>Section 2</h3>
	<div>
		<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
		Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
		faucibus interdum tellus libero ac justo.</p>
	</div>
	<h3>Section 3</h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
		Quisque lobortis.Phasellus pellentesque purus in massa.</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
</div>
]]></html>
	</example>
	<category slug="widgets"/>
</entry>