首先，我们来看一下用 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" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
这个时候的效果就和图中完全相同了。下面，我们将会讲一些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"}
});