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

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

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

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

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
<div class="toggle-button">開閉ボタン</div>
<div class="toggle-target">
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
    <p>テスト要素テスト要素</p>
</div>

最低限のCSS。

SyntaxHighlighterについて
1
2
3
4
.toggle-target {
  height: 0;
  overflow: hidden;
}

JavaScriptはこう。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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の為に繰り返し処理を入れています。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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は一緒。

SyntaxHighlighterについて
1
2
3
4
.toggle-target {
  height: 0;
  overflow: hidden;
}

JavaScriptはこう。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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”を指定出来るようになった！

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

DANISH ENDURANCE（ダニッシュ・エンデュランス） クォーターパフォーマンスソックス マルチパック 抗菌 通気性 靴擦防止 スニーカー ランニングソックス スポーツソックス メンズ レディース (グリーン/グレー 3ペア/25.0cm – 28.0cm)

”javascript”タグの他の記事を見る