Search within TutorialsPark

jQuery UI : Setting UP jQuery


Learn how to use Setup jQuery UI Files and Folders


jQuery UI : Setup jQuery

jQuery UI Accordion provides a number of methods. Most of the methods are same as those for other method, except for method resize and activate.

The method resize is used to resize the elements on the document, the method activate is used to activate specified accordion headers.

Table : Accordion Methods

Methods Description
accordion("destroy") To remove the accordion functionality from the input element.
accordion("disable") To disable the accordion
accordion("enable") To enable the accordion
accordion("option") To set one or more options
accordion("activate", index) To open the specified content element
accordion("resize") To resize the accordion when the fillSpace setting is used and the size of the parent element changes.

jQuery UI Accordion: Adding or Removing Panels

jQuery UI Accordion methods allow you to destroy the an accordion panel, you can even create an accordion.

In the demo below, we create new variable and assign is the div accordion, and then refreshed using method refresh

Example: jQuery Accordion UI - Adding New Accordion

Give it a TRY! » Note: Click on Create Accordion button to add any number of new accordions.


jQuery UI Accordion : Creating Multiple Accordions

Some situations may demand you to have multiple accordion on a single page, having multiple accordion on a single page is not an issue, as long as its called properly.

Example: jQuery Accordion UI - Creating Multiple Accordion

Give it a TRY! » Note:You can add any number of accordion, just take care to call them accurately


jQuery UI Accordion : Removing the Accordion

Similarly, you can remove an accordion as well, all you need to do is remove the markup of header and panel both, you should remove them seperately.

In the demo below, remove the Accordion by specifying the index no(zero based) of the panel.

Example: jQuery UI Accordion - Removing an Accordion

Give it a TRY! » Note:Index no is zero based, starting from 0 to n-1