可折叠的内容块
可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。
如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
实例:
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>
默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
实例:
<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠！</h1>
<p>现在我默认是展开的。</p>
</div>
嵌套的可折叠块
可以嵌套可折叠内容块：
实例:
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
提示：可折叠内容块可以被嵌套您希望的任意次数。
可折叠集合
可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
创建若干内容块，然后通过 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>
更多示例：
1、通过 data-inset 属性来删除圆角（如何移除 collapsibles 上的圆角。默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角。）
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠的 data-inset</h1>
</div>
<div data-role="content">
<h2>没有圆角的可折叠内容块：</h2>
<div data-role="collapsible" data-inset="false">
<h1>这是没有圆角的可折叠内容块。</h1>
<p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角。</p>
</div>
<br>
<h2>没有圆角的可折叠内容块：</h2>
<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsible">
<h3>点击我 - 我是可折叠的！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我是可折叠的！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我是可折叠的！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我是可折叠的！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
2、通过 data-mini 最小化 collapsibles（如何使 collapsibles 更小巧。）
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠块</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-mini="true">
<h1>点击我 - 我是可折叠的！</h1>
<p>我是可折叠的内容。</p>
</div>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
3、通过 data-collapsed-icon 和 data-expanded-icon 改变图标（如何改变 collapsibles 的图标（默认是 + 和 -）
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠块</h1>
</div>
<div data-role="content">
<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>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
