【jQuery】開閉に応じてボタンのテキストも変更するアコーディオン

jQueryで開閉に応じてボタンのテキストも変更するアコーディオンを作る機会があったのでメモ。

• アコーディオンの親要素、アコーディオンのコンテンツ、トリガーにそれぞれclassを付与
• 文字の切り替えはトリガーに設定したdata属性を取得する（同じような文言違いのアコーディオンが増えてもdata属性で対応できる）
• アクティブ状態用のスタイリングのためにis-activeのclassを付与

accordion.js

const createAcc = () => {
    // classを定義
    const parent = 'js-acc';
    const content = 'js-acc-content';
    const triger = 'js-acc-triger';
    const flag = 'is-active';
    const dataClose = 'close';
    const dataOpen = 'open';
    // アコーディオンのコンテンツを隠す
    $(`.${content}`).hide();
    // クリックされた時の処理
    $(`.${triger}`).on('click', function(){
        // トリガーの親要素を取得
        let targetParent = $(this).closest(`.${parent}`);
	// 開閉して親要素にアクティブ用のclassを付与
        let target = targetParent.find(`.${content}`);
        target.slideToggle();
        targetParent.toggleClass(flag);
	// 開閉に応じてボタンのテキストを変更する
        if($(this).data(dataClose) && $(this).data(dataOpen)) {
            if(targetParent.hasClass(flag)) {
                let txt = $(this).data(dataClose);
                $(this).text(txt);
            } else {
                let txt = $(this).data(dataOpen);
                $(this).text(txt);
            }
        }
    });
}

createAcc();

htmlは下記のように記述

accordion.html

<div class="js-acc">
    <button type="button" class="js-acc-triger" data-close="やっぱ閉じる" data-open="開く">開く</button>
    <p class="js-acc-content">中身</dd>
</div>