The Tabs widget will help you to break the content into several logical sections. It can be very convenient if there is not enough of free space on your web-page. The content for each tab panel can be defined in-page or can be loaded via Ajax.

cache – whether or not to cache remote tabs content, e.g., load only once or with every click. Cached content is being lazy loaded, e.g., once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag in the ajaxOptions option.

collapsible – when set to true, the active panel can be closed.

cookie – store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. Requires the cookie plugin, which can also be found in the development-bundle-external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options.

disabled – which tabs are disabled. Multiple types supported: Boolean: Enable or disable all tabs. Array: An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab.

event – the type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover".

panelTemplate –HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

selected – which panel is currently open. Multiple types supported: Boolean: Setting selected to false will collapse all panels. This requires the collapsible option to be true. Integer: The zero-based index of the panel that is selected (open).

spinner –the HTML content to show in a tab title while remote content is loading. Set this option to an empty string to deactivate the spinner behavior. A span element must be present in the anchor tag of the title for the spinner content to be visible.

HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the URL and tab label that are passed as arguments to the add() method.

Events:

select – triggered directly after a tab is selected.Can be canceled to prevent the tab from being selected.

load – triggered after a remote tab has been loaded..

show – triggered after a tab has been selected (after animation completes).

add – triggered when a tab is added.

remove – triggered when a tab is removed.

enable – triggered when a tab is enabled.

disable – triggered when a tab is disabled.

Methods: destroy – removes the tabs functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. Code examples: Invoke the destroy method:1 $( ".selector" ).tabs( "destroy" );

option – gets the value currently associated with the specified optionName. optionName Type: String The name of the option to get. Code examples: Invoke the method:1 $( ".selector" ).tabs( "option" );

add – ( url, label [, index ] ) Add a tab. url Type: String The URL of the tab to add. label Type: String The name of the tab to add. index Type: Number Where to add the new tab (zero-based). If omitted, the new tab will be added as the last tab. Code examples: Invoke the add method:1 $( ".selector" ).tabs( "add" );

url – change the URL from whcih an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab. index Type: Integer The zero-based index of the tab to update. url Type: String The URL to set for the tab. Code examples: Invoke the url method:1 $( ".selector" ).tabs( "url" );

length – retrieve the number of tabs of the first matched tab pane. This method does not accept any arguments. Code examples: Invoke the length method:1 $( ".selector" ).tabs( "length" );

rotate – ( duration [, continuing ] ) Set up an automation rotation through the tabs. duration Type: Number The duration in milliseconds for each tab to be visible before rotating to the next tab. continuing (default: false) Type: Boolean Whether or not to continue the rotation after a tab has been selected by a user. Code examples: Invoke the rotate method:1 $( ".selector" ).tabs( "rotate" );