2020/08/22

【jQuery不要】javascriptで作るアコーディオン

jQuery無しで動くアコーディオンを作りました。
スライドする動きはどうにも表現が難しかったのでアニメーションライブラリのGSAPで動きをつけました。

GSAP – GreenSock
https://greensock.com/gsap/

See the Pen 200822_アコーディオン by nekuta (@nekuta) on CodePen.

イベントリスナー登録

forで１つずつイベントをつける時は、var = i　とするところを let = i　とかにすると、ブロックスコープになるので全ての要素にイベントがつきます。

let accordionOpen = document.getElementsByClassName('accordion-open');
for (let i = 0; i < accordionOpen.length; i++) {
//accordion-openの数だけイベントをつけます
  accordionOpen[i].addEventListener('click', function (e) {
    //クリックした時に発火
    accordionAction(e);
  }, false);
}

アニメーション

//openする時
thisAccordion.classList.add('is-open');
TweenMax.to(target, 0.6, {
  height: targetHeight + 'px',
  opacity: 1,
  ease: Power1.easeOut,
  //上の処理が終わったらaccordionFlgをtrueにする
  onComplete: function () {
  accordionFlg = true;
 },
});




//closeする時
var timeLine = new TimelineMax();//タイムラインを作成
timeLine.to(target, 0.15, {
  opacity: 0,
  ease: Power1.easeOut,
}).to(target, 0.5, {
  height: 0,
  ease: Power1.easeOut,
})
timeLine.eventCallback('onComplete', end);
//timeLineの処理が終わったら関数endを呼び出す

function end() {
  accordionFlg = true;
  thisAccordion.classList.remove('is-open');
}