1. Home
  2. jQuery Mobile collapsible block

The best jQuery Mobile collapsible block Tutorial In 2024, In this tutorial you can learn Collapsible content block,Examples,Examples,Nested collapsible block,Examples,Foldable collection,Examples,More examples,

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:

Examples

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

By default, the content is being folded. To expand the content when the page loads, use the data-collapsed = "false":

Examples

<div data-role="collapsible" data-collapsed="false" >
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>


Nested collapsible block

Collapsible content blocks can be nested to each other:

Examples

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


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


Examples

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).

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery Mobile collapsible block
10/30