jQuery UI : Accordion Method
Learn how to use jQuery UI Accordion Method to control Accordions
jQuery UI : Accordion Methods
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
|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 AccordionGive 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 AccordionGive 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.