jQuery Mobile collapsible block
Collapsible content block
Collapsible block allows you to hide or display the contents - for storing part of the information useful.
To create a collapsible content block, you need to add the container data-role = "collapsible" attribute. In the container (div) inside, add a header element (H1-H6), followed by the extension you want to make HTML tags:
By default, the content is being folded. To expand the content when the page loads, use the data-collapsed = "false":
Examples
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>
try it"
Nested collapsible block
Collapsible content blocks can be nested to each other:
Examples
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
try it"
 | Collapsible content blocks can be nested several times according to your needs. |
|---|
Foldable collection
Foldable collapsible block set is grouped together (like an accordion). When a new block is deployed, all the other blocks will be folded.
Create several collapsible content block, then the contents of the block surrounded by the collapsible container with a new data-role = "collapsible-set" of:
Examples
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>
try it"
More examples
Cancel fillet with margins through data-inset attribute
How to cancel the outside corner with a collapsible block distance.
Through data-mini mini attribute of collapsible blocks
How to make collapsible block smaller.
Change the icon by data-collapsed-icon and data-expanded-icon
How to change the icon to collapse block (the default is + and -).
The fold-pop
Create a drawer in the pop.
Edit icon location
In the drawer of how to modify the position of the icon (the default is on the left).