jQuery UI Library

Accordion

Syntax#

  • $(function() { $( “#selecter” ).accordion();

});

  • $(function() { $( “#selecter” ).accordion({ active: 2 });

});

  • $(function() { $( “#selecter” ).accordion({ animate: 200 });

});

  • $(function() { $( “#selecter” ).accordion({ collapsible: true });

});

Parameters#

Parameter Detail
active Type Boolean or Integer, Boolean requires collapsible to be true
animate Type Boolean, Number, String or Object
collapsible Type Boolean
event Type String
header Type Selector element
heightStyle Type String
icons Type jQuery UI icon object
## Remarks#
More information can be found here: https://api.jqueryui.com/accordion/
## Accordion Basic Usage
To use an accordion, one must have headers and content inside the headers in their HTML. Then one must instantiate the accordion() method of jQuery UI.
<script>
$(function() {
    $( "#accordion" ).accordion();
});
</script>

In the HTML:

<div id="accordion">
    <h3>First header</h3>
        <div>First content panel</div>
    <h3>Second header</h3>
        <div>Second content panel</div>
</div>

enter image description here

Accordion destroy usage

$( "#accordion" ).accordion( "destroy" );

This will remove the accordion functionality completely and show default HTML removing all the jQuery-UI elements.

This method does not take any arguments.

Accordion disable Usage

$( "#accordion" ).accordion( "disable" );

This method will disable the accordion, i.e. the headers are not selectable making the content read only and static.

This method does not take any arguments.

Accordion enable Usage

$( "#accordion" ).accordion( "enable" );

This method will enable an accordion. This will enable a disabled accordion or simply do nothing on an already enabled accordion.

This method does not take any arguments.

Accordion option Usage

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

This will return a PlainObject giving all the options representing the selected accordion. This will contain all the values of the keys that are explained in the Parameters section.

This method takes parameters which are the basic optionNames explained in the parameter. One can set the options like this:

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

Accordion refresh Usage

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

This method recomputes the height of the accordion panels if headers or content was added or removed in the DOM.

Accordiong widget usage

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

This method returns a jQuery object containing the accordion.


This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow