メニュー-Menu
①開閉メニュー
☆ソース
<div data-role="collapsible">
<h3>開閉メニュー1</h3>
<p>ド～はドーナツのド～</p>
</div>
<div data-role="collapsible">
<h3>開閉メニュー2</h3>
<p>レ～はレモンのレ～</p>
</div>
<div data-role="collapsible">
<h3>開閉メニュー3</h3>
<p>ミ～はみんなのミ～</p>
</div>
デモ
開閉メニュー1
ド～はドーナツのド～
開閉メニュー2
レ～はレモンのレ～
開閉メニュー3
ミ～はみんなのミ～
②アコーディオンメニュー
☆ソース
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>アコーディオンメニュー1</h3>
<p>ド～はドーナツのド～</p>
</div>
<div data-role="collapsible">
<h3>アコーディオンメニュー2</h3>
<p>レ～はレモンのレ～</p>
</div>
<div data-role="collapsible">
<h3>アコーディオンメニュー3</h3>
<p>ミ～はみんなのミ～</p>
</div>
</div>
デモ
アコーディオンメニュー1
ド～はドーナツのド～
アコーディオンメニュー2
レ～はレモンのレ～
アコーディオンメニュー3
ミ～はみんなのミ～
③メニューごとに、テーマを分けて
色分けをすることも可能。
☆ソース
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="a">
<h3>アコーディオンメニュー1</h3>
<p>ド～はドーナツのド～</p>
</div>
<div data-role="collapsible" data-theme="b">
<h3>アコーディオンメニュー2</h3>
<p>レ～はレモンのレ～</p>
</div>
<div data-role="collapsible" data-theme="e">
<h3>アコーディオンメニュー3</h3>
<p>ミ～はみんなのミ～</p>
</div>
</div>
デモ
アコーディオンメニュー1
ド～はドーナツのド～
アコーディオンメニュー2
レ～はレモンのレ～
アコーディオンメニュー3
ミ～はみんなのミ～
④メニューに階層をつけたり、組み合わせることも可能。
☆ソース
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="a">
<h3>アコーディオンメニュー1</h3>
<p>ド～はドーナツのド～</p>
</div>
<div data-role="collapsible" data-theme="b">
<h3>アコーディオンメニュー2</h3>
<p>レ～はレモンのレ～
<div data-role="collapsible" data-theme="c">
<h3>アコーディオンメニュー2-1</h3>
<p>ファ～はファイトのファ～</p>
</div>
<div data-role="collapsible" data-theme="d">
<h3>アコーディオンメニュー2-2</h3>
<p>ソ～はソースのソ～</p>
</div>
</p>
</div>
<div data-role="collapsible" data-theme="e">
<h3>アコーディオンメニュー3</h3>
<p>ミ～はみんなのミ～</p>
</div>
</div>
デモ
アコーディオンメニュー1
ド～はドーナツのド～
アコーディオンメニュー2
レ～はレモンのレ～
アコーディオンメニュー2-1
ファ～はファイトのファ～
アコーディオンメニュー2-2
ソ～はソースのソ～
アコーディオンメニュー3
ミ～はみんなのミ～