アコーディオンコンテンツ

レスポンシブ対応のサイト作成において、PCは通常のタイトル＋段落、
スマホではアコーディオンメニューのように開閉するパターンがあります。
JSの設定値でブレイクポイントを変更できます。デフォルトでは768を境にしています。

ではまずは【デモ】。

<div class="accMenu">
    <h4 class="flowTitle">タイトルが入ります。</h4>
    <div class="accordion">
        <dl class="accBox">
            <dt class="accBtn">タイトルが入ります。</dt>
            <dd class="accData">内容が入ります。</dd>
        </dl>
        <dl class="accBox">
            <dt class="accBtn">タイトルが入ります。</dt>
            <dd class="accData">内容が入ります。</dd>
        </dl>
        <dl class="accBox">
            <dt class="accBtn">タイトルが入ります。</dt>
            <dd class="accData">内容が入ります。</dd>
        </dl>
    </div>
</div>

<h4 class="flowTitle">タイトルが入ります。</h4>

<dt class="accBtn">タイトルが入ります。</dt>

<dd class="accData">内容が入ります。</dd>

</dl>

<dt class="accBtn">タイトルが入ります。</dt>

<dd class="accData">内容が入ります。</dd>

</dl>

<dt class="accBtn">タイトルが入ります。</dt>

<dd class="accData">内容が入ります。</dd>

</dl>

</div>

    //////////////////////////////////////////////
    //
    //    アコーディオンメニュー
    //
    //////////////////////////////////////////////
    if ($('.accMenu').length) {
        // OnOffを切り替えるウィンドウサイズ。
        var accWidth = 768;
        $(".accMenu .accBtn").click(function(){
            var windowWidth = parseInt($(window).width());
            if(windowWidth >= accWidth) {
                // 画面サイズ大のとき
            } else {
                // 画面サイズ小のとき
                $(this).toggleClass("open");    
                $(this).next(".accData").slideToggle();
                $(this).parent(".accBox").siblings(".accBox").children(".accData").slideUp();
                $(this).parent(".accBox").siblings(".accBox").children(".accBtn").removeClass("open");
            }
        });
        // 画面サイズ変更時で、OnOff切り替えが行われる場合はリセットする
        var isAccordion = null;
        $(window).on('load resize', function() {
            var windowWidth = parseInt($(window).width());
            if(isAccordion != null && isAccordion === (windowWidth < accWidth)) {
                return;
            }
            isAccordion = windowWidth < accWidth;

            if(!isAccordion) {
                $(".accBox").children(".accData").slideDown();
                $(".accBox").children(".accBtn").removeClass("open");
            } else {
                $(".accBox").children(".accData").slideUp();
                $(".accBox").children(".accBtn").removeClass("open");
            }
        });
    }

//////////////////////////////////////////////

// アコーディオンメニュー

//////////////////////////////////////////////

if ($('.accMenu').length) {

// OnOffを切り替えるウィンドウサイズ。

var accWidth = 768;

$(".accMenu .accBtn").click(function(){

var windowWidth = parseInt($(window).width());

if(windowWidth >= accWidth) {

// 画面サイズ大のとき

} else {

// 画面サイズ小のとき

$(this).toggleClass("open");

$(this).next(".accData").slideToggle();

$(this).parent(".accBox").siblings(".accBox").children(".accData").slideUp();

$(this).parent(".accBox").siblings(".accBox").children(".accBtn").removeClass("open");

}

});

// 画面サイズ変更時で、OnOff切り替えが行われる場合はリセットする

var isAccordion = null;

$(window).on('load resize', function() {

var windowWidth = parseInt($(window).width());

if(isAccordion != null && isAccordion === (windowWidth < accWidth)) {

return;

}

isAccordion = windowWidth < accWidth;

if(!isAccordion) {

$(".accBox").children(".accData").slideDown();

$(".accBox").children(".accBtn").removeClass("open");

} else {

$(".accBox").children(".accData").slideUp();

$(".accBox").children(".accBtn").removeClass("open");

}

});

}

/* ######################################################################################

　アコーディオンメニュー

###################################################################################### */
.accMenu {padding:1em;}
.accBox:not(:last-child) {margin-bottom:1em;}
.accBtn {
    display:block;
    position:relative;
    border:1px solid #cccccc;
    background:#eaeaea;
    padding:1em 3em 1em 1em;
}
.accBtn:after {
    display:inline-block;
    position:absolute;
    top:50%;
    right:1em;
    transform:translateY(-50%);
}
.accData {
    background:#f0f0f0;
    padding:1em;
}
@media screen and (max-width: 767px){
.accBtn {cursor:pointer;}
.accBtn:after {content:"→";}
.accBtn.open:after {content:"↓";}
}

/* ######################################################################################

　アコーディオンメニュー

###################################################################################### */

.accMenu {padding:1em;}

.accBox:not(:last-child) {margin-bottom:1em;}

.accBtn {

display:block;

position:relative;

border:1px solid #cccccc;

background:#eaeaea;

padding:1em 3em 1em 1em;

}

.accBtn:after {

display:inline-block;

position:absolute;

top:50%;

right:1em;

transform:translateY(-50%);

}

.accData {

background:#f0f0f0;

padding:1em;

}

@media screen and (max-width: 767px){

.accBtn {cursor:pointer;}

.accBtn:after {content:"→";}

.accBtn.open:after {content:"↓";}

}

Share this:

Like this: