<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{ padding:0px; margin:0px;}
body{ font-size:12px;}
#accdiorn{ width:400px; height:200px; margin:100px; }
#accdiorn h3{ font-size:16px; line-height:4px; font-weight:normal;}
</style>
<!--uiplus/themes/ui-lightness导入这个路径下的样式文件-->
<link rel="stylesheet" type="text/css" href="../JQuery/uiplus/themes/ui-lightness/jquery.ui.all.css" />
<!--导入jquery-1.6.2.min.js-->
<script src="../JQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<!--以下导入的jquery代码库均是 http://jqueryui.com/download 这里下载的,导入的顺序绝对不能变的-->
<script src="../JQuery/uiplus/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="../JQuery/uiplus/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../JQuery/uiplus/ui/jquery.ui.accordion.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("#accdiorn").accordion(); //调用代码库的这个方法就可以上下移动
});
</script>
</head>
<body>
<!--以下这种html格式不可更改-->
<div id="accdiorn">
<h3><a href="#">选项1</a></h3>
<div>
<p>I am choice 1</p>
<p>I am choice 1</p>
<p>I am choice 1</p>
<p>I am choice 1</p>
</div>
<h3><a href="#">选项2</a></h3>
<div>
<p>I am choice 2</p>
<p>I am choice 2</p>
<p>I am choice 2</p>
<p>I am choice 2</p>
</div>
<h3><a href="#">选项3</a></h3>
<div>
<p>I am choice 3</p>
<p>I am choice 3</p>
<p>I am choice 3</p>
<p>I am choice 3</p>
</div>
</div>
</body>
</html>
![](http://hi.csdn.net/attachment/201108/28/0_131453843000wX.gif)
上面是效果图,样式可以自己更改