jQuery UI Accordion
jQuery UI Accordian is an expandable and collapsible content holder that is broken into sections and probably looks like tabs.
Syntax:
You can use the accordion () method in two forms:
First Method
$(selector, context).accordion (options) Method:
The accordion (options) method specifies that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved.
Syntax:
You can use one or more options at a time using Javascript object. In the case of more than one options to be provided, you have to separate them using a comma as follows:
Following is a list of different options that can be used with this method:
| Option | Description |
|---|---|
| active | It specifies the index of the menu that is open when the page is first accessed. By default its value is 0. It is of two types: boolean: if set to false will collapse all panels. This requires the collapsible option to be true. integer: The zero-based index of the panel that is active (open). a negative value selects panels going backward from the last panel. |
| animate | The animate option is used to set how to animate changing panels. By default its value is {}. this is of four types: boolean: a value of false will disable animations. number: this is a duration in milliseconds string: name of easing to use with default duration. object: animation settings with easing and duration properties. |
| collapsible | This option allows users to click on the open panel’s header have no effect when it is set to false. It facilitates users to close a menu by clicking on it when it is set to true. By default its value is false. |
| disabled | If you set this option’s value true then it disables the accordion. By default its value is false. |
| event | This option specifies the event used to select an accordion header. By default its value is click. |
| header | This option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li > :first-child,> :not(li):even. |
| heightStyle | The heightStyle option is used to control the height of accordion and panels. By default its value is auto. Its possible values are: auto: all panels will be set to the height of the tallest panel. fill: expand to the available height based on the accordion’s parent height. content: each panel will be only as tall as its content. |
| icons | This option is an object that defines the icons to use to the left of the header text for opened and closed panels. The icon to use for closed panels is specified as a property named header, whereas the icon to use for open panels is specified as a property named headerselected. By default its value is { “header”: “ui-icon-triangle-1-e”, “activeheader”: “ui-icon-triangle-1-s” }. |
jQuery UI Accordion() Example 1
Let’s take an example of jQuery UI Accordion() method:
Second Method
The accordion (“action”, params) method is used to perform an action on accordion elements, such as selecting/de-selecting the accordion menu. The action is specified as a string in the first argument (e.g., “disable” disables all menus).
Syntax:
Following is a list of actions that can be passed.
| Action | Description |
|---|---|
| destroy | This action destroys the accordion functionality of an element completely. The elements return to their pre-init state. |
| disable | This action disable all menus. No click will be taken into account. This method does not accept any arguments. |
| enable | This action reactivate all menus. The clicks are again considered. This method does not accept any arguments. |
| option(optionName) | This action gets the value of currently associated accordion element with the specified optionname. This takes a string value as argument. |
| option | This action gets an object containing key/value pairs representing the current accordion options hash. |
| option(optionName, value) | This action sets the value of the accordion option associated with the specified optionName. |
| option(options) | This action sets one or more options for the accordion. Here options is a map of option-value pairs to set. |
| refresh | This action processes any headers and panels that were added or removed directly in the dom. it then re-computes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments. |
| widget | This action returns the accordion widget element; the one annotated with the UI-accordion class name. |
jQuery UI Accordion() method example 2
Let’s take an example to demonstrate the use of option (optionName, value) method: