Logo
Welcome Smartik
Profile Logout
Accordion
Tabs Charts

Accordion

Accordion are generally used to break content into multiple sections that can be swapped to save space, like tabs.

How to create an Accordion?

1. Initialize the plugin

jQuery(function() {
	jQuery( ".ui_accordion" ).accordion({
		active: false, //Selector for the active element. Set to false to display none at start. Needs collapsible: true.
		collapsible: true, //Whether all the sections can be closed at once.
		autoHeight: false, //If set, the highest content part is used as height reference for all other parts. 
		navigation: true //If set, looks for the anchor that matches location.href and activates it.
	});
});

2. Create the HTML using the same class from the code above:


<div class="ui_accordion">
	...
</div>

3 Create first section. Here is the structure of a single section:


<h3><a href="#">My section title</a></h3>
<div>
	<p> Here is all my content for this section </p>
</div>

4 Final code:


<div class="ui_accordion">

	<h3><a href="#">My section title 1</a></h3>
	<div><p> Here is all my content for my section 1 </p></div>

	<h3><a href="#">My section title 2</a></h3>
	<div><p> Here is all my content for my section 2 </p></div>

	<h3><a href="#">My section title 3</a></h3>
	<div><p>  Here is all my content for my section 3 </p></div>

</div>

The result of the code above:

My section title 1

Here is all my content for my section 1

My section title 2

Here is all my content for my section 2

My section title 3

Here is all my content for my section 3


Options

Main Options
OPTION TYPE DEFAULT DESCRIPTION
disabled Boolean false Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.
active Selector, Element, jQuery, Boolean, Number first child Selector for the active element. Set to false to display none at start. Needs collapsible: true.
animated Boolean, String 'slide' Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).
autoHeight Boolean true If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.
collapsible Boolean false Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).
event String 'click' The event on which to trigger the accordion.
fillSpace Boolean false If set, the accordion completely fills the height of the parent element. Overrides autoheight.
header Selector, jQuery '> li > :first-child,> :not(li):even' Selector for the header element.
icons Object { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' } Icons to use for headers. Icons may be specified for 'header' and 'headerSelected'. Set to false to have no icons displayed.
navigation Boolean true If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.
navigationFilter Function Overwrite the default location.href-matching with your own matcher.
OPTION TYPE DEFAULT DESCRIPTION
Reference:
Tabs Charts