5-3 手风琴--声明式触发手风琴（一）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

手风琴--声明式触发手风琴（一）

触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例：（六步）
第一步，设计一个面板组合，里面有三个折叠区：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

你将看到这样的一个效果：

第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">标题一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>
…

此时你将看到下图这样的效果：

接下来的步骤，见下一节的介绍。

任务

我来试试，按照本小节的步骤，完成手风琴控件制作的前2步。

（不要拷贝粘贴就完事噢！）

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>声明式触发手风琴（一）</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>body{padding:10px;margin:10px}</style>
  8. </head>
  9. <body>
  10.  
  11.  
  12. </body>
  13. </html>
下一节