<desc>A single content area with multiple panels, each associated with a header in a list.</desc>

<longdesc>

<p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p>

<p>The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the <code>href</code> of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the <ahref="#option-event"><code>event</code></a> option.</p>

<h3>Keyboard interaction</h3>

<p>When focus is on a tab, the following key commands are available:</p>

<ul>

<li>UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.</li>

<li>DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.</li>

<li>HOME: Move focus to the first tab. Activate focused tab after a short delay.</li>

<li>END: Move focus to the last tab. Activate focused tab after a short delay.</li>

<desc>Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed, <code>ui.oldTab</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the tabs are collapsing, <code>ui.newTab</code> and <code>ui.newPanel</code> will be empty jQuery objects.</desc>

<argumentname="event"type="Event"/>

<argumentname="ui"type="Object">

<propertyname="newTab"type="jQuery">

<desc>The tab that was just activated.</desc>

</property>

<propertyname="oldTab"type="jQuery">

<desc>The tab that was just deactivated.</desc>

</property>

<propertyname="newPanel"type="jQuery">

<desc>The panel that was just activated.</desc>

</property>

<propertyname="oldPanel"type="jQuery">

<desc>The panel that was just deactivated.</desc>

</property>

</argument>

</event>

<eventname="beforeActivate"type="tabsbeforeactivate">

<desc>Triggered directly after a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed, <code>ui.oldTab</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the tabs are collapsing, <code>ui.newTab</code> and <code>ui.newPanel</code> will be empty jQuery objects.</desc>

<argumentname="event"type="Event"/>

<argumentname="ui"type="Object">

<propertyname="newTab"type="jQuery">

<desc>The tab that is about to be activated.</desc>

</property>

<propertyname="oldTab"type="jQuery">

<desc>The tab that is about to be deactivated.</desc>

</property>

<propertyname="newPanel"type="jQuery">

<desc>The panel that is about to be activated.</desc>

</property>

<propertyname="oldPanel"type="jQuery">

<desc>The panel that is about to be deactivated.</desc>

</property>

</argument>

</event>

<eventname="beforeLoad"type="tabsload">

<desc>Triggered when a remote tab is about to be loaded, after the <ahref="#event-beforeActivate"><code>beforeActivate</code></a> event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to <code>ui.jqXHR</code> and <code>ui.ajaxSettings</code>.</desc>

<argumentname="event"type="Event"/>

<argumentname="ui"type="Object">

<propertyname="tab"type="jQuery">

<desc>The tab that is being loaded.</desc>

</property>

<propertyname="panel"type="jQuery">

<desc>The panel which will be populated by the Ajax response.</desc>

</property>

<propertyname="jqXHR"type="jqXHR">

<desc>The <code>jqXHR</code> object that is requesting the content.</desc>

</property>

<propertyname="ajaxSettings"type="Object">

<desc>The settings that will be used by <ahref="//api.jquery.com/jQuery.ajax"><code>jQuery.ajax</code></a> to request the content.</desc>

</property>

</argument>

</event>

<eventname="create">

<desc>Triggered when the tabs are created. If the tabs are collapsed, <code>ui.tab</code> and <code>ui.panel</code> will be empty jQuery objects.</desc>

<desc>Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the <ahref="#option-heightStyle"><code>heightStyle</code></a> option.</desc>