jQuery Mobileで折りたたみコンテンツを実現するには、div要素などのコンテナに「data-role="collapsible"」属性を加える。
その後の最初のh要素が「見出し」となって、その後ろが折りたたみできるようになる!
最初から折りたたみが開かれた状態で表示したいときは、

<div data-role="collapsible" data-collapsed="false">

のように、「data-collapsed="false"」を追加する。
実際に作ってみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>マルチページのてすと</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div data-role="page" id="top">
	<div data-role="header">
		<h1>目次</h1>
	</div>
	<div data-role="collapsible">
		<!-- この下のh要素が見出しになる -->
		<h2>来週の暗殺教室</h2>
		<!-- 見出しをクリックすると開く -->
		<p>完全防御形態になった殺せんせーと、突然吐血する生徒達。烏丸の指揮の元、崖の上の耐ウイルス薬を奪い取るための奇襲に走る!</p>
	</div>

	<div data-role="collapsible">
		<!-- この下のh要素が見出しになる -->
		<h2>来週のハイキュー!</h2>
		<!-- 見出しをクリックすると開く -->
		<p>ハイキュー!アニメ化決定おめでとう!!!あの漫画は絵はあまりうまくないけど、見せ方がすごくうまい。あと台詞。演出もいい。</p>
	</div>
</div>
</body>
</html>

画面のイメージはこんな感じになる。
f:id:sho322:20130928211452p:image

参考にした本

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

  • 作者: 大津真
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2013/03/21
  • メディア: Kindle版
  • この商品を含むブログ (4件) を見る

基礎の基礎から解説してくれて、スマホアプリの作り方のイメージがわくようになってくる。素晴らしい本。