jQuery Mobile collapsible blocks

Collapsible Content Blocks

Collapsible blocks allow you to hide or show content - useful for storing partial information.

To create a collapsible content block, you need to add the data-role="collapsible" attribute to the container. Inside the container (div), add a heading element (H1-H6), followed by the HTML tag you want to expand:

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠块</h1>
  </div>

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

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div>

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

By default, the content is collapsed. To expand content on page load, use data-collapsed="false":

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠块</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed="false">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

Nested collapsible blocks

Collapsible content blocks can be nested within each other:

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>嵌套的可折叠块</h1>
  </div>

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

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 


</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

	Collapsible content blocks can be nested as many times as you need.

Collapsible Collections

Collapsible collections are collapsible blocks grouped together (like an accordion). When a new block is expanded, all other blocks are collapsed.

Create several collapsible content blocks, and then surround the collapsible content blocks with new containers with data-role="collapsible-set":

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠集</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsibleset">
      <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> 


</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

More Example

Cancel rounded corners and margins through the data-inset attribute

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠的 data-inset</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>带有圆角的可折叠内容块:</h2>
    <div data-role="collapsible">
      <h1>这是有圆角的可折叠内容块。</h1>
      <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
    </div>

    <h2>没有圆角的可折叠内容块：</h2>
    <div data-role="collapsible" data-inset="false">
      <h1>这是没有圆角的可折叠内容块。</h1>
      <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
    </div>
    <br>

    <h2>没有圆角的可折叠集合:</h2>
    <div data-role="collapsibleset">
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
    </div>
  </div>
   
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>  
</div> 

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

How to cancel the rounded corners and margins on the collapsible block.

Mini collapsible blocks through the data-mini attribute

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠块</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-mini="true">
      <h1>点击我 - 我是可折叠的！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>页脚</h1>
  </div>
</div>

</body>
</html>

Run instance»

Click the "Run Example" button to view the online example

How to make the collapsible block smaller.

Change the icon through data-collapsed-icon and data-expanded-icon

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折叠块</h1>
  </div>

  <div data-role="main" class="ui-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> 

</body>
</html>

Run the example»

Click the "Run Example" button to view the online example

How to change the icon of the collapsible block (the default is + and -).

Use folding in the pop-up window
Create folding items in the pop-up window.

Modify the icon position
How to modify the icon position in the folded item (the default is on the left).

jQuery Mobile collapsible blocks

Collapsible Content Blocks

Example

Instance

Nested collapsible blocks

Instance

Collapsible Collections

Example

More Example

Example

Instance

Example

php.cn