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

今まで使っていたアコーディオンの仕組みがjQueryに依存していたので、ちょっと作り直した。

とりあえずは簡単に設置できるような仕様にした。

仕様

• アコーディオン構造の入れ子に対応
• 特にコンテンツブロックを指定する必要はないが、代わりにラベルの直後にコンテンツブロックを隣接させる必要がある。

使い方

• 開閉用のラベル（ボタン）に .accordion-label を追加する。
• 開閉するコンテンツに .accordion-content を追加する。
• 開閉するコンテンツ直下に .accordion-content-inner を追加する。
• コンテンツブロックが開いた時には、ラベルとコンテンツに .o-active が付与される。

サンプルコード

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

今後改良したいこと

• data属性を追加して、開閉するコンテンツブロックを指定できるようにする。
• クラス化してインスタンス生成時の引数に、任意のcssクラスを渡して設定できるようにする。
  （今の隣接しているだけで設定できる機能も残す）