可折叠的内容块

可折叠允许您隐藏或显示内容 - 对于存储部分信息很有用。
如需创建可折叠的内容块，添加 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记。

<div data-role="collapsible">
  <h1>点击我 - 我可以折叠！</h1>
  <p>我是可折叠的内容。</p>
</div>

默认折叠内容是关闭的，如需在页面加载时展开内容，使用 data-collapsed="false"。

可折叠内容块可以被嵌套您希望的任意次数

<div data-role="collapsible">
  <h1>点击我 - 我可以折叠！</h1>
  <p>我是被展开的内容。</p>
  <div data-role="collapsible">
    <h1>点击我 - 我是嵌套的可折叠块！</h1>
    <p>我是嵌套的可折叠块中被展开的内容。</p>
  </div>
</div>

可折叠集合
被组合在一起的可折叠块（常被称为手风琴）；
使用data-role="collapsible-set"来包裹多个折叠块。

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

data-role="collapsible-set

折叠按钮连接在一起，有圆角和边距

我们可以在 data-role="collapsible-set" 的基础上添加 data-inset="false" 来去掉边框的圆角，以及间距：

data-inset="false"

通过添加data-mini="true"来缩小折叠框：

data-mini="true"

通过 data-collapsed-icon 和 data-expanded-icon 来改变图标（默认加减号）

    <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
      <h1>data-collapsed-icon 规定按钮的图标。</h1>
      <p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
    </div>