アコーディオンをブロック作る 02（v1.1）

前回の「アコーディオンをブロック作る 01」はラベル部分とコンテンツ部分が隣接する必要があった。
今回は開閉するコンテンツを指定するターゲットモードと、ラッパーで囲むモードを追加した。

仕様

v1.1

• ターゲットモード追加
  ターゲットとするコンテンツを指定できる。ラベルとコンテンツを隣接させる必要が無い。

• ラッパーモード追加
  ラベルとコンテンツを特定のラッパーで囲む。ターゲットコンテンツの指定も、ラベルとコンテンツを隣接も必要が無い。

• 隣接モード
  特にコンテンツを指定する必要はないが、代わりにラベルの直後にコンテンツを隣接させる必要がある。

• アコーディオン構造の入れ子可能

使い方とサンプルコード

ターゲットモード

• 開閉用のラベル（ボタン）に .accordion-label と、data-accordion-target=”xxxxx” を追加。
  xxxxx 部分は data-accordion-id を指定。
• 開閉するコンテンツに .accordion-content と data-accordion-id=”xxxxx” を追加。
  .accordion-labelに隣接している必要は無い。
• 開閉するコンテンツ直下に .accordion-content-inner を追加する。
• オープン時には、ラベルとコンテンツに .o-active が付与される。

DOM構造

サンプルコード

See the Pen Untitled by s4ec (@ShinjiY) on CodePen.

ラッパーモード

• 開閉用のラベル（ボタン）に .accordion-label を追加。
• 開閉するコンテンツに .accordion-content を追加。.accordion-labelに隣接している必要は無い。
• .accordion-label と .accordion-contentを .accordion-wrapper で囲む。
• 開閉するコンテンツ直下に .accordion-content-inner を追加する。
• オープン時には、ラベルとコンテンツに .o-active が付与される。

DOM構造

サンプルコード

See the Pen Accordion Block 01 (v1.1) – wrapper mode by s4ec (@ShinjiY) on CodePen.

隣接モード

• 開閉用のラベル（ボタン）に .accordion-label を追加。
• 開閉するコンテンツに .accordion-content を追加。.accordion-labelに隣接している必要がある。
• 開閉するコンテンツ直下に .accordion-content-inner を追加。
• オープン時には、ラベルとコンテンツに .o-active が付与される。

DOM構造

サンプルコード

See the Pen Accordion Block 01 (v1.1) – wrapper mode by s4ec (@ShinjiY) on CodePen.

今後改良したいこと

• クラス化してインスタンス生成時の引数に、任意のcssクラスを渡して設定できるようにする？