jQuery Mobile collapsible blocks
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile collapsible blocks
Collapsible content blocks
Collapsible blocks allow you to hide or display content - useful for storing some information.
To create a collapsible block of content, you need to add the data-role"collapsible" property to the container. Within the container (div), add a title element (H1-H6), followed by the HTML tag you want to extend:
By default, content is collapsed. To expand the content when the page loads, use data-collapsed "false":
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>
Try it out . . .
Nested collapsible blocks
Collapsible blocks of content can be nested with each other:
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
Try it out . . .
|
Collapsible blocks of content can be nested multiple times according to your needs. |
|---|
The collapsible collection
A collapsible collection is a combination of collapsible blocks (like an accordion). When a new block is expanded, all other blocks are folded up.
Create several collapsible blocks of content, and then surround the collapsible blocks with a new container with data-role"collapsible-set":
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>
Try it out . . .
More instances
The fillet is canceled by the data-inset property
How to cancel fillets on a collapsible block.
Miniaturize collapsible blocks with data-mini properties
How to make the collapsible block smaller.
Change the icons with data-collapsed-icon and data-expanded-icon
How to change the icon of the collapsible block (the default is . . . and -).
You can learn more about jQuery Mobile collapsible blocks by practicing the examples above!