Accordion

折叠面板（Accordion）包含一系列的面板（panel）。 所有面板（panel）的头部（header）都是可见的，但是一次仅仅显示一个面板（panel）的 body 内容。 当用户点击面板（panel）的头部（header）时，该面板（panel）的 body 内容将可见，同时其他面板（panel）的 body 内容将隐藏不可见。

通过标签创建折叠面板，给< div >标签添加一个名为'easyui-accordion'的类。

<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 easyui framework for jQuery.     
        It lets you define your accordion component on 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>

我们可以调用'getSelected'方法获取当前面板，此外我们还可以调用'refresh'方法重新载入新内容。

var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
if (pp){    
    pp.panel('refresh','new_content.php');  // 调用'refresh'方法刷新 
}

关于折叠面板的属性与方法还有很多，我们就不多做介绍了，有兴趣的同学请看这里。