构造一个可折叠面板的页面

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用。

如下代码：

<dl class="accordion" id="my-accordion">
 <dt>Section 1</dt>
   <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
 <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

当然我们还要给他加上CSS样式，CSS代码就不在这里详细写了，具体的代码在右边CSS代码框中。效果图如下: