Accordion

Override defaults with $.fn.accordion.defaults.

Dependencies

Usage Example

Create Accordion

Create accordion via markup, add 'easyui-accordion' class to <div/> markup.

  1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
  2.     <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">  
  3.         <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
  4.         <p>Accordion is a part of easyui framework for jQuery.   
  5.         It lets you define your accordion component on web page more easily.</p>  
  6.     </div>  
  7.     <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">  
  8.         content2  
  9.     </div>  
  10.     <div title="Title3">  
  11.         content3  
  12.     </div>  
  13. </div>  

We can change or recreate accordion later and modify some features.

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

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.

  1. var pp = $('#aa').accordion('getSelected'); // get the selected panel  
  2. if (pp){  
  3.     pp.panel('refresh','new_content.php');  // call 'refresh' method to load new content  
  4. }  

 

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

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

Events

Name Parameters Description
onSelect title Fires when a panel is selected.
onAdd title Fires when a new panel is added.
onBeforeRemove title Fires before a panel is removed, return false to cancel the remove action.
onRemove title 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 selected panel.
getPanel title Get the specified panel.
select title Select the specified panel.
add options Add a new panel.
remove title Remove the specified panel.