jQuery UI : Accordion
Learn how to use jQuery UI Accordion
jQuery UI : Accordion
jQuery UI Accordion widget is used to group contents into seperate panels that can be open or closed based on interaction from user end.
At any given time, at the most only one is visible to the user.Each accordion container has a heading element which is used to open the container and display the content within.
Accordion can be used to display content which can be broken in smaller discrete section, thus not making the viewer overwhelmed by lots of content at once.
jQuery UI AutoComplete: Creating a Basic Accordion
jQuery UI Accordion widget is created by using the accordion method on a div element.
The Accordion feature looks for header(h1-h6) to break up the content such that each header has a content associated with it.
In the demo below, the label property is displayed within the strong element.Properties are read from ui.item Object.
Example: jQuery UI Accordion - Create a Basic AccordionGive it a TRY! » Note: Each Heading with the selected div element gets transformed to an accordion.
jQuery UI Accordion: Configuring the Accordion
jQuery UI Accordion supports multiple settings which can be used to fine-tune the behaviour of accordion.
Table : jQuery Configuring the Accordion
|active||To get or set the content to be displayed. The default is to show the first content element initially.|
|animate||To set the animation to used during transition from one content element to another. The default value is false|
|autoHeight||When set to true, the height of the tallest content element is used for all such elements|
|clearStyle||When set to true, the accordion clears the height and overflow CSS properties after transition animation ends. The default value is false|
|collapsible||When set to true all of the contents section can get collapsed. Default value is false|
|disabled||When set to true the accordion is disabled. The default value is false.|
|event||To set the event on the headers that triggers the drawers to open. Default is click|
|fillSpace||If set as true , the accordion fills the height of the parent element.|
|header||To set the selector for header Elements.|
|heightStyle||To control the height of the accordion and each panel|
|icons||To specify the icon for the header elements and the selected state|
jQuery UI Accordion: Setting the Height of Accordion
jQuery UI Accordion setting can be used to set the height of the accordion, based either the height of the content of the accordion elements or the height of the parent element.
The best way to set height is to use default value, which is done by using autoHeight setting, it sets all of the content elements to the same height which is the height of the tallest element.
Example: jQuery Accordion UI - Setting the Height of AccordionGive it a TRY! » Note: The setting autoHeight is the default setting, it set to true by default.
jQuery UI Accordion : Changing the Trigger Event
The jQuery UI Accordion has a setting to change the trigger Event. The default trigger event is click, but we can trigger it using other events as well.
In the demo below, we create an object called as customEvent which contains the key event and the value Mouseover, which is then passed to the accordion() method as an argument, it overrides the default click event.
Example: jQuery Accordion UI - Changing the Trigger EventGive it a TRY! » Note:You can even set the options using an inline object within the widget method.
jQuery UI Accordion : Changing the Default Active Header
The jQuery UI Accordion by default open the first header to the viewer.However, we can set which header to open using the option active.
In the demo below, we set the value of the active option to 1 to open the second tab as default(index values are 0 based)
Example: jQuery Accordion UI - Changing the Default Active HeaderGive it a TRY! » Note:To open none of the accordion as default, set the value of active to false
jQuery UI Accordion : Filling the Height of the Container
The jQuery UI Accordion configuration option of heightStyle is used to make the accordion to take the full height of its container.
In the demo below, we set the container of the accordion equal to the body element, thus height of the body is the height of the accordion.
Example: jQuery AutoComplete UI - Changing the Trigger EventGive it a TRY! » Note:The value of heightStyle is set to fill to make the accordion to fill the entire container.
jQuery UI Accordion : Using the Accordion Animation
The jQuery UI Accordion widget has a built in default animation scheme, this default animation can be disabled by setting the Value of animation to false.
You can even set a custom animation by setting the values of duration and easing for the selected accordion.
Example: jQuery AutoComplete UI - Changing the Trigger EventGive it a TRY! » Note: The easing effect has been set to easeOutBounce to create a Bouncing effect.
jQuery UI Accordion : Changing the Icons of Accordions
The jQuery UI Accordion has an option to change the icons of Accordion headers, there are two properties available header and headerSelected
The property header is used to set the icon when the Accordion is closed, while the property headerSelected is used to set the icon when the accordion is open.