可能我們在開發中遇到過這樣的問題，我們只是看到一個題目或者簡單的介紹，然後一點選會在下面展開對應的詳細的內容。在jqm中實現這個效果很簡單。下面給出一段例子程式碼：

<!DOCTYPE html>

<html>

<head>

<title>Collapsible Content - 2</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>

<div data-role="page" id="first">

    <div data-role="header">

        <h1>Collapsible Test</h1>

    </div>

    <div data-role="content">

        <div data-role="collapsible">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible" data-content-theme="c" data-iconpos="right">

              <h3>First</h3>

              <p>

                Hello World again...

              </p>

          </div>

    </div>

</div>

</body>

</html>

頁面顯示如下：第一個未點開，第二、三、四個都點選開了。

第三個使用了data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"修改icon。

第四個使用data-content-theme="c"修改顯示的主題，使其內容被帶有邊框的內容包圍。 data-iconpos="right"使icon顯示在右邊。

我們可以將所有帶有data-role="collapsible"屬性的div，包圍在一個<div data-role="collapsible-set">中，使其組成一個整體，但是這樣點選其中一個的時候，其他的會自動關閉。這樣的顯示效果如下：