collapsible

このエントリーをはてなブックマークに追加

data-role=”collapsible”はコラプシブルパネルを作成できる属性です。

data-role=”collapsible”を指定した要素の内側にh1-h6要素もしくはlegend要素でヘッダー部分を、その後にコンテンツ部分を記述します。

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

ヘッダーがクリックされるとコンテンツ部分が表示されるようになります。

コラプシブルパネルではさまざまな属性が利用可能です。また、collapsible-set属性を指定した要素で包むことでアコーディオンウィジェットとして利用することも可能です。

コラプシブルパネルやアコーディオンのヘッダー部分はdata-theme属性で、コンテンツ部分はdata-content-theme属性でテーマが変更できます。

参考URL

jQuery Mobile Docs - Collapsible Content

登録日 : 2012年10月13日 最終更新日 : 2016年12月19日

同じカテゴリー(data-role)のエントリー

検索

スポンサードリンク

バージョン

リファレンス