アコーディオン式コンテンツのマークアップ

アコーディオン式コンテンツは、基本的に開閉式コンテンツがセットになったものです。これらの親要素に data-role=“collapsible-set” 属性を追加してやることで、フレームワークは自動的に各コンテンツをグループ化するような見た目を付与し、アコーディオン式にひとつだけのコンテンツが開かれるような動作を実現します。設定可能な属性値についてはdata属性リファレンスを参照してください。



  

        
Section 1

        
I'm the collapsible set content for section B.

        


  

        
Section 2

        
I'm the collapsible set content for section B.

以下は、5つのセクションを持つアコーディオン式コンテンツの例です。

Section 1

I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the data-collapsed="false" attribute.

Section 2

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 3

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 4

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 5

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

テーマ設定

標準的な data-theme 属性は、各開閉式コンテンツの色を指定するために利用できます。ヘッダとコンテンツ部分の結びつきを明確にしたい場合 data-content-theme 属性にスウォッチを指定します。これによってテーマの背景色と枠線の色がコンテンツ部分に適用されます。一貫性のあるテーマ設定をするならば、親要素に属性を追加します。

Section 1

Collapsible content

Section 2

Collapsible content

Section 3

Collapsible content

各セクションの個別テーマ設定

グループ内でセクション毎に異なったスタイル指定をすることも出来ます。それぞれの開閉式コンテンツに data-theme や data-content-theme を指定してください。

Section header, swatch B

Collapsible content, swatch B

Section header, swatch A

Collapsible content, swatch A

Section header, swatch E

Collapsible content, swatch D