開閉式コンテンツ

開閉式コンテンツ

開閉型のブロックを作成するには、コンテナ要素に data-role=“collapsible” 属性を指定します。コンテンツ部分のテーマ変更には data-content-theme を使います。開閉式コンテンツに指定可能な属性はdata属性リファレンスを参照してください。

このコンテナ直下には、ヘッダ要素(h1～h6のどれか)を追加します。フレームワークはこのヘッダ要素をクリック可能なボタンのように整形し、左端に “+” アイコンを追加します。

ヘッダの後ろには、開閉される部分のコンテンツを自由に記述してください。後続のコンテンツは自動的にラップされて、ユーザの操作により表示/非表示が切り替わるようになります。

 
        
ヘッダ
 
        
ここがコンテンツ部分です。初期状態では表示されており、ヘッダがクリックされると非表示になります。
 

読み込み時に開閉式コンテンツを開いておく

ページが読み込まれた直後の時点で開閉式コンテンツを開いた状態にしておくには、ラッパーに data-collapsed=“false” 属性を追加します。

これにより、次のようになります。

コンテンツ部分のテーマ設定

開閉式コンテンツのスタイルは、若干の余白を設定した程度の最小限にとどめられています。

開閉させるヘッダ部分とコンテンツ部分が強く関連づいて見えるようなスタイルにするには data-content-theme 属性をラッパーに指定して、スウォッチを設定します。これによって、スウォッチで定置された枠線と、平坦な背景色(グラデーションは適用されません)がコンテンツ部分にあてられます。そしてヘッダの下部とコンテンツ部分の上部から角の丸みが無くなり、グループ化された見栄えになります。

   
Header swatch A
   
I'm the collapsible content with a themed content block set to "C".

ヘッダ部分のテーマ設定

ヘッダとなるボタン部分のテーマを設定するには data-theme 属性をラッパーに設定し、スウォッチを指定します。ヘッダのスウォッチとコンテンツ部分のそれは、異なったものでも構いません。

   
Header swatch A
   
I'm the collapsible content with a themed content block set to "A".

入れ子になった開閉式コンテンツ

開閉式コンテンツは、必要であれば入れ子にすることも出来ます。この例では、階層構造がわかりやすいようテーマを変えて設定しています。

開閉セット(アコーディオン)

複数の開閉式ブロックをグループ化して、いずれかひとつのブロックだけが開くアコーディオン式のウィジェットにすることも出来ます。くわしくは「アコーディオン式コンテンツ」を参照してください。