Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

205 lines (198 sloc) 9.332 kb
<?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", "headerSelected": "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-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>
Jump to Line
Something went wrong with that request. Please try again.