Accordion the JQuery UI for expanding and collapsing content

We can show headers only for a group of content ( panels ) and on clicking the header we can display the content by expanding it, by changing the focus to other headers the previous header content will hide by collapsing.

Header 1

Text about Header 1

Header 2

Text about Header 2

Header 3

Text header 3

Header 4

Text about Header 4.

This is useful for showing FAQ, threaded discussions etc where users can decide to read more based on the title of the content. Here is the syntax

<script>
$(document).ready(function() {
$( '#accordion' ).accordion();
});
</script>

HTML

<div id='accordion'>
  <h3>Header 1</h3>
  <div>
    Text about Header 1    
  </div>
  <h3>Header 2</h3>
  <div>
    Text about Header 2    
  </div>
  <h3>Header 3</h3> 
  <div>
   Text header 3
  </div>
  <h3>Header 4</h3>
  <div>
   Text about Header 4.
  </div>
</div>

Output is here

Using Keyboard

Arrow key UP / LEFT move up direction the focus of headers
Arrow key DOWN/ RIGHT move in down direction
HOME shift focus to first header
END shift focus to last header
SPACE / ENTER open the focused header

Options

Active
Animate
Classes
Collapsible
Disabled
event
header
heightStyle
icons

Methods

destroy
Disable
Enable
Instance
Option
Refresh
widget

Events

activate
beforeActivate
create

Options Details

Options	Details
Active
We can decide which panel to remain active or open, by default this value is 0, so the first panel remains in open or active condition. We can make any other panel to remain active. Here is the code `$( '#accordion' ).accordion({ active: 3 });` DEMO of Accordion with Active Panel To read active panel number `var p_active = $( ".accordion" ).accordion( "option", "active" );` To set the active panel `$( ".accordion" ).accordion( "option", "active", sel ); // sel is the variable` DEMO of shifting active panel by Radio button selection by user Collapse all panels of accordion by setting active to false along with setting of collapsible to true `$( '#accordion' ).accordion({ active: false, collapsible: true });` DEMO of All panels collapsed

Active

We can decide which panel to remain active or open, by default this value is 0, so the first panel remains in open or active condition. We can make any other panel to remain active. Here is the code

$( '#accordion' ).accordion({
active: 3
});

To read active panel number

var p_active = $( ".accordion" ).accordion( "option", "active" );

To set the active panel

$( ".accordion" ).accordion( "option", "active", sel ); 
// sel is the variable

Collapse all panels of accordion by setting active to false along with setting of collapsible to true

$( '#accordion' ).accordion({
active: false,
collapsible: true
});

Animate

We can decide speed of transition of panels by setting value for animate. The value can be any of these four

Boolean : FALSE used to disable animation
Number : transition in milliseconds
String : Name easing can be given like
Object : Combine easing and duration properties

$( '#accordion' ).accordion({
animate: 50
});

To read animate value or speed of transition of panels

var  speed = $( ".accordion" ).accordion( "option", "animate" );

To set the speed of animation

$( ".accordion" ).accordion( "option", "animate", sel );
 // sel is the variable

classes

WE can add different classes to the elements of the accordion.

collapsible

Wheater all panels can be closed or not. It will take boolean value, True of false.

$( '#accordion' ).accordion({
active: false,
collapsible: true
});

disabled

Enable or disable the accordion, default value is false. Takes boolean value only

$( '#accordion' ).accordion({
disabled: false
});

To Set the property to True of False

$( "#accordion" ).accordion( "option", "disabled", true);

To Get the value of disabled property.

var get_v = $( "#accordion" ).accordion( "option", "disabled" );

event

Click or Mousever event of the accordion, default value is Click.

$( '#accordion' ).accordion({
event:"mouseover"
});

To Set or Get click event of Accordion

header

Default value is "> li > :first-child,> :not(li):even"
The header element must be the sibling to content element.

$( '#accordion' ).accordion({
header:".header"
});

heightStyle

Default value is "auto"
It will take three values
"auto" : All panels will take the height of panel having maximum height
"fill" : Panels will fill the available parent height of accordion
"content" : each panel will take the height based on its content

$( '#accordion' ).accordion({
heightStyle:"content"
});

icons

Default value is "{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"}"
We can change the icons to plus and minus

$( '#accordion' ).accordion({
icons:{"header":"ui-icon-plus","activeHeader":"ui-icon-minus"}
});

To Get the icons option value

var get_v = $( "#accordion" ).accordion( "option", "icons" );

To Set the icons options

$( ".accordion" ).accordion( "option", "icons", 
{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );

destroy

Remove the functionality of the accordion , it left with text part only.

$("#destroy").click(function() {
$( ".accordion" ).accordion( "destroy" );
})

disable

Disables the accordion.

$("#destroy").click(function() {
$( ".accordion" ).accordion( "disable" );
})

enable

Enable the accordion.

$("#destroy").click(function() {
$( ".accordion" ).accordion( "enable" );
})

instance

Create accordion instance object and use it.

var test_instance =$(".accordion" ).accordion( "instance" );

option

get the option name and value.

var my_option = $( ".accordion" ).accordion( "option", "active" );

We can use dot notation to get the value if the option is an object. Example .

var my_option = $( ".accordion" ).accordion( "option", "icons" );
$('#d1').html(my_option.header);

We can get the object with key value pair of all the options.

var options = $( ".accordion" ).accordion( "option" );

$.each( options, function( key, value ) {
 $('#d1').append( key + ": " + value + "
");
});

Example :

refresh

Refresh the accordion to refresh the changes.

$( ".accordion" ).accordion( "refresh" );

widget

Get Jquery object of the accordion .

var my_widget = $( ".accordion" ).accordion( "widget" );

activate

This event is triggered once panel transition is completed. By keeping the animate:1000 we can reduce the speed of transition and observe that the event takes place after the completion of animation. We will get four objects to use

newHeader : header which is just activated
newPanel: Panel which is just activated
oldHeader : header which was just deactivated
oldPanel : Panel which was just deactivated.

$( '#accordion' ).accordion({
animate: 1000,
activate: function( event, ui ) {
$('#d1').html("newHeader : " + ui.newHeader.text() + 
	" <br> newPanel : " + ui.newPanel.text() + "
 <br><br> oldHeader : " + ui.oldHeader.text() + 
 "<br> oldPanel : " + ui.oldPanel);
 }
});

beforeActivate

All the details are same as activate event above.
This event is triggered before the panel transition started. We will get four objects to use

newHeader : header which is just activated
newPanel: Panel which is just activated
oldHeader : header which was just deactivated
oldPanel : Panel which was just deactivated.

$( '#accordion' ).accordion({
animate: 1000,
beforeActivate: function( event, ui ) {
$('#d1').html("newHeader : " + ui.newHeader.text() + 
	" <br> newPanel : " + ui.newPanel.text() + "
 <br><br> oldHeader : " + ui.oldHeader.text() + 
 "<br> oldPanel : " + ui.oldPanel);
 }
});

create

This event is triggered at the time of creation of accordion.
We will get two objects to use

header : header which is active at the time of creation
panel: Panel which is active at the time of creation

create: function( event, ui ) {
$('#d1').html("header : " + ui.header.text() + 
	" <br> Panel : " + ui.panel.text() )
 }

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Accordion JQuery event

Header 1

Header 2

Header 3

Header 4

Using Keyboard

Subscribe

1

2

3

4