感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Mobileで折りたたみコンテンツを作る

<スポンサーリンク>

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>

画面のイメージはこんな感じになる。

参考にした本


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