# 可折叠的内容 Collapsible content markup 要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collapsible"属性 容器内直接的标题（h1-h6)子结点，Jquery Mobile会将之表现为可点击的按钮，并在左侧添加一个“+"按钮，表示是可以展开的 在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显 ``` <div data-role="collapsible"> 　 <h3>I'm a header</h3> 　 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p> </div> ```  如上所示：默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩 ``` <div data-role="collapsible" **data-collapsed="true">** ``` 可折叠的内容采用了精简的样式，我们仅仅在内容和标题间添加了一些margin，标题则采用它所在容器的默认主题 ## 嵌套的折叠 Nested Collapsibles  ## 折叠组 Collapsible sets 通过给父容器添加data-role="collapsible-set"属?然后每一个子容器data-role="collapsible"属性，可以让容器展开时，其他容器被折叠的效果，类似手风琴组件