案例:jQuery UI案例     状态:可编辑再运行    进入横版
AخA
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 折叠面板(Accordion) - 自定义图标</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <script>
11
  $(function() {
12
    var icons = {
13
      header: "ui-icon-circle-arrow-e",
14
      activeHeader: "ui-icon-circle-arrow-s"
15
    };
16
    $( "#accordion" ).accordion({
17
      icons: icons
18
    });
19
    $( "#toggle" ).button().click(function() {
20
      if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
21
        $( "#accordion" ).accordion( "option", "icons", null );
22
      } else {
23
        $( "#accordion" ).accordion( "option", "icons", icons );
24
      }

 运行结果 
 北美留学生论坛