🐝

【jQuery】スマホだけアコーディオンにしてPCは通常表示する

2023/08/18に公開

スマホだけアコーディオンにして表示したい時ってありますよね。
PC時にリサイズした際にも対応できるようにしたスクリプトを作ったのでメモ。

accordion.js

// スマホ表示にするbreakpoint
const mediaSp = 768;
// css用 activeクラス
const flag = 'is-active';
// スマホ用アコーディオン要素
const spAccParent = 'js-acc-sp';
const spAccContent = 'js-acc-sp-content';
const spAccTriger = 'js-acc-sp-triger';

// スマホだけアコーディオン
const createAccSp = () => {
    if($(window).width() <= mediaSp) {
        $(`.${spAccContent}`).hide();
    }
    $(`.${spAccTriger}`).on('click', function(){
        if($(window).width() <= mediaSp) {
            let targetParent = $(this).closest(`.${spAccParent}`)
	    let target = targetParent.find(`.${spAccContent}`);
	    target.slideToggle();
	     targetParent.toggleClass(flag);
	 }
    });
}

// pcリサイズ時の処理（アコーディオン用）
constresizeAccSp = (vw) => {
    if(vw <= mediaSp) {
        $(`.${spAccContent}`).hide();
            $(`.${spAccParent}`).removeClass(flag);
    } else {
        $(`.${spAccContent}`).show();
    }
}

// pcリサイズ時の処理（アコーディオン以外の他のリサイズ時の処理も追加可能）
const resizeWindow = () => {
    let vw = $(window).width();
    $(window).on('resize', () => {
        // 画面の横幅にサイズ変動がないので処理を終える
	if (vw === $(window).width()) {
	return;
    }
	// 画面の横幅のサイズ変動があった時のみ高さを再計算する
	vw = $(window).width();
	resizeAccSp(vw);
    });
}

createAcc();
createAccSp();
resizeWindow();

HTMLは下記のように記述

accordion.html

<dl class="js-acc-sp">
    <dt class="js-acc-sp-triger">アコーディオントリガー</dt>
    <dd class="js-acc-sp-content">アコーディオンコンテンツ</dd>
</dl>

Discussion