首先，我們來看一下用 Accordion 做出來的效果
demo.gif
簡單使用
可以看到，這么一個效果還是很美觀的，那么我們應該怎么使用呢？首先我們需要 JQuery UI 提供給我們的代碼資源，可以去 jqueryui.com 前去下載，然后在項目中引用。而且我們的項目還必須依賴于 JQuery ，所以我們需要引入三個文件，如下所示。
<script src="jquery-3.0.0.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
好了，依賴文件都引入完畢了，那么我們下面就用代碼去做出這么一個效果，說是我們自己寫，其實是別人寫好了我們用而已。
<div id="Accordion">
<h3>Java</h3>
<div>
<p>
</p>
</div>
<h3>Android</h3>
<div>
<p>
</p>
</div>
<h3>JQuery</h3>
<div>
<p>
</p>
</div>
</div>
這里我將 p 標簽下的內容給去掉了，太占行數了，可以自行指定，下面就是書寫我們自己的 JS 代碼。
<script>
$(document).ready(function () {
$("#Accordion").accordion();
})
</script>
對的，只需要這么一行，就會出現這么炫酷的效果。不過這里會出現一個問題，你會發現效果不和上圖一樣，這里的標題左邊并沒有那個動態的小圖標，其實想一下也應該知道，我們本地并沒有圖標資源，怎么可能會有圖標顯示出來呢？所以，在這里我們需要將一開始引入的css 替換掉，如下
<link rel="stylesheet" >
這個時候的效果就和圖中完全相同了。下面，我們將會講一些Accordion 屬性。
其他屬性
以上 Accordion 效果必須有一個標題是展開的，也就是說我們無法將所有的標題都隱藏，有的時候我們并不想要這么一個效果，那么我們可以這么設置
$(document).ready(function () {
$("#Accordion").accordion({
collapsible:true
});
})
事實上，我們可以通過兩種方式為我們的方法設置屬性，以上只是其中一種，還有一種如下所示
$("#Accordion").accordion();
$("#Accordion").accordion("option", "collapsible", true);
區別在哪里呢？很明顯前一種在中括號中我們可以同時設置多個屬性的值，而在后一種主要是設置一種屬性的值。
當然，我們還可以指定圖標的樣式，以上顯示的效果只是默認的一種而已，JQuery UI 官網上給我們提供了許多免費的圖標樣式，我們也可以手動進行指定
$("#Accordion").accordion({
icons: {header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s"}
});