Accordion
Override defaults with $.fn.accordion.defaults.
The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.
Dependencies
- panel
Usage Example
Create Accordion
Create accordion via markup, add 'easyui-accordion' class to <div/> markup.
We can change or recreate accordion later and modify some features.
Refresh Accordion Panel Content
Call 'getSelected' method to get the current panel and then we can call 'refresh' method of panel to load new content.
Container Options
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | The width of accordion container. | auto |
| height | number | The height of accordion container. | auto |
| fit | boolean | Set to true to set the accordion container size fit it's parent container. | false |
| border | boolean | Defines if to show the border. | true |
| animate | boolean | Defines if to show animation effect when expand or collapse panel. | true |
| multiple | boolean | True to enable expanding multiple panels at one time. Available since version 1.3.5. | false |
| selected | number | The initialized selected panel index. Available since version 1.3.5. | 0 |
| halign | string | The header alignment of the accordion panel. Possible values are: 'top','left','right'. Available since version 1.5.2. | top |
Panel Options
The accordion panel options is inhirited from panel, below is the addition properties:
| Name | Type | Description | Default |
|---|---|---|---|
| selected | boolean | Set to true to expand the panel. | false |
| collapsible | boolean | Defines if to show collapsible button. False will prevent from clicking to expand/collapse this panel. | true |
Events
| Name | Parameters | Description |
|---|---|---|
| onSelect | title,index | Fires when a panel is selected. |
| onUnselect | title,index | Fires when a panel is unselected. Available since version 1.3.5. |
| onAdd | title,index | Fires when a new panel is added. |
| onBeforeRemove | title,index | Fires before a panel is removed, return false to cancel the remove action. |
| onRemove | title,index | Fires when a panel is removed. |
Methods
| Name | Parameter | Description |
|---|---|---|
| options | none | Return the options of accordion. |
| panels | none | Get all panels. |
| resize | none | Resize the accordion. |
| getSelected | none | Get the first selected panel. |
| getSelections | none | Get the all the selected panels. Available since version 1.3.5. |
| getPanel | which | Get the specified panel. The 'which' parameter can be the title or index of panel. |
| getPanelIndex | panel |
Get the specified panel index. Available since version 1.3.
The example below shows how to get the selected panel index.
var p = $('#aa').accordion('getSelected');
if (p){
var index = $('#aa').accordion('getPanelIndex', p);
alert(index);
}
|
| select | which | Select the specified panel. The 'which' parameter can be the title or index of panel. |
| unselect | which | Unselect the specified panel. The 'which' parameter can be the title or index of panel. Available since version 1.3.5. |
| add | options |
Add a new panel. By default the added panel will become selected.
To add a unselected new panel, pass the 'selected' property and set it to false.
Code example:
$('#aa').accordion('add', {
title: 'New Title',
content: 'New Content',
selected: false
});
|
| remove | which | Remove the specified panel. The 'which' parameter can be the title or index of panel. |