Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

198 lines (192 sloc) 8.867 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>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<option name="active" default="0">
<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="{}">
<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">
<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"'>
<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"'>
<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"'>
<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" }'>
<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" type="accordionactivate">
<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" type="accordionbeforeactivate">
<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.