Accordion摺疊面板也叫可伸縮面板、手風琴選單等等，通過名字我們可以大體知道它的作用，在很多網站中都有設定這個摺疊面板的，可以通過jQuery程式碼來編寫，也可以使用easyUI程式碼編寫，現在我們以easyUI程式碼編寫的形式來看看怎麼在文件中創建出一個摺疊面板。由於easyUI是前端框架，所以我們直接用Dreamweaver軟體來編寫程式碼即可。
操作方法
（01）建立檔案滑鼠雙擊桌面上的Dreamweaver圖示，開啟軟體，點選選單欄中的【檔案】--【新建】--【HTML】型別，建立一個HTML文件。
（02）在head頭部引入4個js檔案，檔案的路徑如下，首先要匯入easyUI資料夾到站點中，然後在站點中找到檔案拉到head頭部，不可直接複製。<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>
（03）在body裡面編寫accordion程式碼<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="珠穆朗瑪峰" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> 珠穆朗瑪峰珠穆朗瑪峰珠穆朗瑪峰珠穆朗瑪峰珠穆朗瑪峰珠穆朗瑪峰珠穆朗瑪峰 </div> <div title="喜馬拉雅山" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> 喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山 </div> <div title="塔里木盆地"> 塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地 </div> </div>
（04）啟動wampserver伺服器預覽程式碼之前，要先啟動wampserver伺服器。雙擊桌面上的wampserver圖示，當桌面右下角的w形圖示由紅變黃最後變綠時，說明wampserver伺服器已經啟動了。
（05）在瀏覽器中預覽點選Dreamweaver中的【地球形狀圖示】，在下拉列表框中選擇【預覽在360se】表示在360瀏覽器中預覽。
（06）效果在瀏覽器中可以看到效果，摺疊面板如下圖所示。點選摺疊面板的標題可以檢視對應的面板內容。
（07）程式碼解析現在我們對可伸縮面板的相關面板進行解析下：（1） class="easyui-accordion" :說明程式碼是摺疊面板，class表示的是一個類；（2）style="width:300px;height:200px;"定義摺疊面板的大小，寬度和高度，可以不定義，但是一般要定義下大小，大小可以根據具體的網頁而定；（3）title="珠穆朗瑪峰" 表示的是一個面板的標題；（4）iconCls:'icon-save'表示的頭部圖示，圖示可變；
特別提示
摺疊面板又稱為可伸縮面板，不止easyUI程式碼可以編寫出可伸縮面板，還可以通過使用jQuery程式碼來編寫，但是用easyUI比較簡單，而jQuery是免費的，因此兩者各有優缺點。
