メニュー-Menu
①開閉メニュー
<![CDATA[ ☆ソース
<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>
]]>
デモ
②アコーディオンメニュー
<![CDATA[ ☆ソース
<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>
]]>
デモ
③メニューごとに、テーマを分けて
色分けをすることも可能。
<![CDATA[ ☆ソース
<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>
]]>
デモ
④メニューに階層をつけたり、組み合わせることも可能。
<![CDATA[ ☆ソース
<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>
]]>
デモ
アコーディオンメニュー2
レ～はレモンのレ～
アコーディオンメニュー2-1
ファ～はファイトのファ～