GSAP3でアコーディオンボックス（slide toggle）を実装するやり方

GSAPのバージョンが３になって久しいですね。
今回はそんなGSAP3から可能になったgsapだけで作るアコーディオンボックスのコードをメモしておこうと思います。

jQueryでのいわゆるslide toggleですが、生のコードで書くのはかなり手間です（開閉するエリアの高さを取るのがめんどい）。僕は別に脱jQuery派ってわけじゃないんですが、GSAPだけでも簡単に出来るようになったという事でまとめておこうかと…。

単体のアコーディオンボックス

開閉ボックスがひとつの場合はこんな感じで良いかと思います。

<div class="toggle-button">開閉ボタン</div>
<div class="toggle-target">
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
</div>

最低限のCSS。

.toggle-target {
  height: 0;
  overflow: hidden;
}

JavaScriptはこう。

let toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click',function(){
    let target = this.nextElementSibling;
    const result = target.classList.contains('open');
    if (result) {
        // 閉じる
        target.classList.remove('open');
        gsap.to(target,{
            height: 0,
            duration:0.5,
            ease: "power2.inOut"
        });
    }else{
        // 開く
        target.classList.add('open');
        gsap.to(target,{
            height:'auto',
            duration:0.5,
            ease: "power2.inOut"
        });
    }
})

複数のアコーディオンボックスを実装

スマホのメニューでは複数の方が定番かなと思います。
単体と処理は一緒ですがquerySelectorAllの為に繰り返し処理を入れています。

<div class="menu__list">
    <div class="menu__btn toggle-button">開閉ボタン1</div>
    <div class="toggle-target">
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
    </div>
</div>
<div class="menu__list">
    <div class="menu__btn toggle-button">開閉ボタン2</div>
    <div class="toggle-target">
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
    </div>
</div>
<div class="menu__list">
    <div class="menu__btn toggle-button">開閉ボタン3</div>
    <div class="toggle-target">
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
        <p>テスト要素テスト要素</p>
    </div>
</div>

CSSは一緒。

.toggle-target {
  height: 0;
  overflow: hidden;
}

JavaScriptはこう。

let toggleButton = document.querySelectorAll('.toggle-button');
for (let i = 0; i < toggleButton.length; i++) {
    toggleButton[i].addEventListener('click',function(){
        let target = this.nextElementSibling;
        const result = target.classList.contains('open');
        if (result) {
            // 閉じる
            target.classList.remove('open');
            gsap.to(target,{
                height: 0,
                duration:0.5,
                ease: "power2.inOut"
            });
        }else{
            // 開く
            target.classList.add('open');
            gsap.to(target,{
                height:'auto',
                duration:0.5,
                ease: "power2.inOut"
            });
        }
    })
}

GSAPはwidthとheightで”auto”を指定出来るようになった！

リリースノートにはさらっと書かれてますがこれかなり嬉しいバージョンアップです。これのおかげでアコーディオンも簡単に実装出来るようになりました。
さりげない変化ですが実装がいろいろ楽になること請け合い。