案例：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
  <style>
11
  #accordion-resizer {
12
    padding: 10px;
13
    width: 350px;
14
    height: 220px;
15
  }
16
  </style>
17
  <script>
18
  $(function() {
19
    $( "#accordion" ).accordion({
20
      heightStyle: "fill"
21
    });
22
  });
23
  $(function() {
24
    $( "#accordion-resizer" ).resizable({

 运行结果　
　北美留学生论坛