jQuery UI Accordion

Being an expandable and collapsible content holder, the jQuery UI Accordion is broken into sections. It probably resembles like tabs.

Syntax:

The accordion() method can be used in two forms:

$(selector, context).accordion (options) Method OR$(selector, context).accordion (“action”, params) Method

First Method: The accordion (options) Method:

To indicate that an HTML element and its contents should be treated and managed as accordion menus, the accordion (options) method is used. The appearance and behavior of the menus involved are specified by the options parameter which is an object.

Syntax:

 $(selector, context).accordion (options); Multiple options can also be used at a time using the Javascript object. For this, the options need to be separated using a comma. Syntax: $(selector, context).accordion({option1: value1, option2: value2..... });

The popular options that can be used with this method are listed below:

Example 1:

 jQuery UI Accordion

Flower meaning:

The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).

Fruit meaning:

The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.

Vegetable meaning:

A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.

Output:

Explanation:

In the above example, we are displaying the use and the behavior of the jQuery UI Accordion() method.

Second Method: The accordion (“action”, params) method:

To perform an action on accordion elements, the accordion (“action”, params) method is used. It can be used for performing actions like selecting/deselecting the accordion menu. The action here is the first argument and is specified as a string. For example, disables all the menus, the “disable” should be passed as a value to the action parameter.

Syntax:

 \$(selector, context).accordion ("action", params);

The actions that can be used with this method are listed below:

 Action Uses destroy To destroy the accordion functionality of an element completely, so that the elements return to their pre-init state. disable To disable all menus. No click is thus taken into account. No argument is accepted by this method. enable To reactivate all menus. The clicks will be considered again. No argument is accepted by this method. option(optionName) To retrieve the value of currently associated accordion element with the specified optionname. A string value is taken as an argument by this method. option To retrieve an object containing key/value pairs representing the current accordion options hash. option(optionName, value) To set the value of the accordion option associated with the specified optionName. option(options) To set one or more options for the accordion. A map of option-value pairs to set is specified by the option parameter. refresh To process any headers and panels that were added or removed directly in the dom. The height of the accordion panels is than recomputed. The output thus have a dependency on the content and the heightStyle option. No argument is accepted by this method. widget To retrieve the accordion widget element; the one annotated with the UI-accordion class name.

Example 2:

 jQuery UI Accordion Example

Flower meaning:

The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).

Fruit meaning:

The sweet and fleshy product of a tree or other plant that contains seed and can be eaten as food.

Vegetable meaning:

A plant or part of a plant used as food, such as a cabbage, potato, turnip, or bean.

Disable Accordion Enable Accordion

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use and behavior of the option (optionName, value) method. Here, we are disabling and enabling the accordion.