❮ Plugins Base Pagination Jeasyui Datagrid Datagrid23 ❯

jQuery EasyUI Layout Plugin - `Accordion`

The default defaults are overridden by $.fn.accordion.defaults.

The Accordion allows you to provide multiple panels while displaying one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking the panel header expands or collapses the panel body. Panel content can be loaded via ajax by specifying the 'href' attribute. Users can define the selected panel. If not specified, the first panel is selected by default.

Dependencies

panel

Usage

Creating an Accordion

Create an Accordion via markup by adding the 'easyui-accordion' class to the <div> tag.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of the easyui framework for jQuery.
        It allows you to define your accordion component on the web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

We can change or rebuild the Accordion after creation to modify certain features.

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

Refreshing Accordion Panel Content

Call the 'getSelected' method to get the current panel, then we can call the panel's 'refresh' method to load new content.

var pp = $('#aa').accordion('getSelected'); // Get the selected panel
if (pp){
    pp.panel('refresh','new_content.php'); // Call the 'refresh' method to load new content
}

Container Options

Name	Type	Description	Default
width	number	The width of the Accordion container.	auto
height	number	The height of the Accordion container.	auto
fit	boolean	Set to true to make the Accordion container fit its parent container.	false
border	boolean	Defines whether to show a border.	true
animate	boolean	Defines whether to show animation effects when expanding or collapsing panels.	true
multiple	boolean	Set to true to allow multiple panels to be expanded at the same time. Available since version 1.3.5.	false
selected	number	The index of the panel to be selected initially. Available since version 1.3.5.	0

Panel Options

Accordion panel options inherit from panel, with the following additional attributes:

Name	Type	Description	Default
selected	boolean	Set to true to expand the panel.	false
collapsible	boolean	Defines whether to show a collapsible button. If set to false, the panel cannot be expanded/collapsed by clicking.	true

Events

Name	Parameters	Description
onSelect	title,index	Triggered when a panel is selected.
onUnselect	title,index	Triggered when a panel is unselected. Available since version 1.3.5.
onAdd	title,index	Triggered when a new panel is added.
onBeforeRemove	title,index	Triggered before a panel is removed, returning false cancels the removal action.
onRemove	title,index	Triggered when a panel is removed.

Methods

Name	Parameters	Description
options	none	Returns the Accordion options.
panels	none	Gets all panels.
resize	none	Resizes the Accordion.
getSelected	none	Gets the first selected panel.
getSelections	none	Gets all selected panels. Available since version 1.3.5.
getPanel	which	Gets the specified panel. The 'which' parameter can be the panel's title or index.
getPanelIndex	panel	Gets the index of the specified panel. Available since version 1.3.
select	which	Selects the specified panel. The 'which' parameter can be the panel's title or index.
unselect	which	Unselects the specified panel. The 'which' parameter can be the panel's title or index. Available since version 1.3.5.
add	options	Adds a new panel. By default, the new panel is selected. To add an unselected new panel, pass the 'selected' attribute and set it to false.
remove	which	Removes the specified panel. The 'which' parameter can be the panel's title or index.