<html>
<head>
<script src="jquery-easyui/jquery.min.js"></script>
<script src="jquery-easyui/jquery.easyui.min.js"></script>
<script src="jquery-easyui/easyloader.js"></script>
<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
</head>
<body>
<!--
accordion的属性
width：可伸缩面板所在容器的宽度
<div class="easyui-accordion" data-options="200">
<div title="Title1" ></div>
</div>
height：可伸缩面板所在容器的高度
<div class="easyui-accordion" data-options="height:200">
<div title="Title1" ></div>
</div>
fit：铺满整个屏幕
<div class="easyui-accordion" data-options="fit:true">
<div title="Title1" ></div>
</div>
border：为false时不显示边框，相反则显示，默认是true
<div class="easyui-accordion" data-options="border:true">
<div title="Title1" ></div>
</div>
animate：为false时没有折叠的动画效果，相反有动画效果，默认是true
<div class="easyui-accordion" data-options="animate:true">
<div title="Title1" ></div>
</div>
可伸缩面板属性
selected：为true时，默认展开这个面板，相反是第一个默认展开，默认是false
<div class="easyui-accordion" data-options="200,height:200">
<div title="Title1" ></div>
<div title="Title2" selected=true></div>
</div>
accordion的事件
onSelect：当一个可伸缩面板被选择时触发。
<div class="easyui-accordion" data-options="200,height:200,onSelect:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onAdd：在一个新面板被添加时触发。
<div class="easyui-accordion" data-options="200,height:200,onAdd:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onBeforeRemove：在可伸缩面板被移除之前触发，返回false将取消移除。
<div class="easyui-accordion" data-options="200,height:200,onBeforeRemove:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onRemove：在一个可伸缩面板被移除时触发。
<div class="easyui-accordion" data-options="200,height:200,onRemove:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
accordion的方法
options：返回容器属性对象。
panels：获取所有的面板。
resize：重置可伸缩面板。
getSelected：获取被选择的面板。
getPanel：获取特定的可伸缩面板。
select：选择特定的面板。
add：添加一个先的可伸缩面板。
remove：移除特定的面板。
-->
<div >
<div title="Title1" icon="icon-sys"></div>
<div title="Title2" ></div>
<div title="Title3" ></div>
<div title="Title4" ></div>
</div>
<input type="button" >
<input type="button" >
<script>
function aa(){
alert('123');
}
//方法的使用
$(function (){
$("#tian").click(function (){
$("#p").accordion('add',{
title:"Title1"
})
})
$("#yi").click(function (){
$("#p").accordion('remove','Title1');
})
})
</script>
</body>
</html>
