開閉パネル data-role属性「collapsible」
親要素にdata-role属性「collapsible」を指定すると、開閉パネルを作成できます。開閉パネルではh1～h6要素で見出しを設定し、その後ろの要素でパネルの内容を記述します。
■サンプル07[HTML]
<div data-role="collapsible">
<h3>開閉パネル</h3>
<p>クリックするとパネルが開きます。</p>
</div>
 |  | |
|---|---|---|
| 開閉パネルでは見出し部分が -アイコンが付いたボタンになり（左）、ボタンをタップするとパネルが閉じ+アイコンに変化する（右） | ||
開閉パネルは、デフォルトではパネルが開いた状態で表示されますが、 data-collapsed属性「true」を指定するとパネルを閉じて表示します（サンプル8）。
■サンプル08[HTML]
<div data-role="collapsible" data-collapsed="true">
<h3>開閉パネル</h3>
<p>クリックするとパネルが開きます。</p>
</div>
 |  | |
|---|---|---|
| 初期状態でパネルが閉じている開閉パネル | ||
アコーディオンパネル data-role属性「collapsible-set」
複数の開閉パネルをdata-role属性「collapsible-set」を指定した要素で包むと、アコーディオンパネルを作成できます。
■サンプル09[HTML]
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>パネル1</h3>
<p>パネル1が開きます。</p>
</div>
<div data-role="collapsible">
<h3>パネル2</h3>
<p>パネル2が開きます。</p>
</div>
<div data-role="collapsible">
<h3>パネル3</h3>
<p>パネル3が開きます。</p>
</div>
</div>
|
|---|
| アコーディオンパネル |
デフォルトでは最後のパネルが開いた状態で表示されますが、任意のパネル要素にdata-collapsed属性「false」を付与するとそのパネルは開いて、そのほかのパネルは閉じて表示されます。
ただし、執筆時のバージョン（ベータ2）では正常に動作しておらず、閉じたいパネルすべてにdata-collapsed属性「true」を指定する必要があります。
■サンプル10[HTML]
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>パネル1</h3>
<p>パネル1が開きます。</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>パネル2</h3>
<p>パネル2が開きます。</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>パネル3</h3>
<p>パネル3が開きます。</p>
</div>
</div>
|
|---|
| パネル1を開いた状態でアコーディオンを表示する |
ソーシャルリアクション
この連載の記事
- 第10回 jQuery MobileのCSSを変更してテーマをカスタマイズ
- 第9回 jQuery Mobileのアコーディオンでスマホサイトを制作
- 第8回 実例で学ぶjQuery MobileのCSSカスタマイズ
- 第6回 サンプルで学ぶjQuery Mobileまとめ（中編）
- 第5回 サンプルで学ぶjQuery Mobileまとめ（前編）
- 第4回 jQuery Mobileによる問い合わせフォームの作成
- 第3回 jQuery Mobileのマークアップの基本とCSSの変更
- 第2回 いまから始める、jQuery Mobileの基本
- 第1回 jQuery Mobileとは――スマホ時代の到来とWeb制作
- この連載の一覧へ
