アコーディオンをブロック作る 03（v1.2.x）

前回の「アコーディオンをブロック作る 02」をクラス化して、インスタンス生成時にラベルなどアコーディオンで必要な部分を任意のcssクラスで指定できるようにした。

変更点について

v1.2.3

• transitionend が複数回実行されるのを修正。

v1.2.2

• インスタンス生成時にラッパー、ラベル、コンテンツ、スピード、コールバック関数を設定できるようになった。
  ※でもデフォルトのままの方が分かりやすいかも？

v1.2.1

• コンテンツが開いているトランジション中に、他のコンテンツも開けるように対応。

v1.2

• クラス化
  クラス化。アコーディオンにするラベルとコンテンツのCSSクラス指定できるようになった。

使い方 インスタンス生成

インスタンスの生成

HTMLなどの下の方でインスタンスを生成する。

const accordion = new Accordion();
accordion.init();

インスタンスの生成（cssクラスを指定する場合）

const accordion = new Accordion({
  wrapper: '.original-wrapper',
  label: '.original-label',
  content: '.original-content',
  inner: '.original-content-inner',
  speed: '0.3',
  onComplete: ()=>{
    console.log('トランジション完了')
  }
});
accordion.init();

任意のCSSクラス（ラベル、コンテンツ、インナー）には、CSSの設定をする。

.original-label {
cursor: pointer;

  &:hover, &:focus {
    opacity: 0.8;
  }
}

.original-content {
  height: 0;
  overflow: hidden;

  &-inner {
    padding: 1em 1em 1em 2em;
    border: solid 1px #666666;
  }
}

使い方 HTMLサンプルコード

CSSクラスを指定したモード

See the Pen Accordion Block 01 (v1.2.2) by s4ec (@ShinjiY) on CodePen.

ターゲットモード

• 開閉用のラベル（ボタン）に .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.

今後改良したいこと

• 一旦完了。だけど、全部開くボタンを追加できるようにしてもいいかも？