Accordion JQuery event

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.
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

Header 1

Text about Header 1

Header 2

Text about Header 2

Header 3

Text header 3

Header 4

Text about Header 4.

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
OptionsDetails
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 Mouseover.
$( '#accordion' ).accordion({
event:"mouseover"
});
To Set or Get click event of Accordion
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() )
 }

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Your Rating


Google+

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer