タダスケのIT備忘録

IT系の個人的備忘録。法律事務所勤務。

モバイルデバイスの場合にコンテンツを非表示にしてボタンで開閉する

表示

デスクトップのとき

開閉ボタン 非表示
コンテンツ 表示

モバイルのとき

開閉ボタン 表示
コンテンツ 非表示

html

<button id="openBtn">open</button>
<div id="openContent">
    hogehoge
</div>

css

#openBtn {
    /*  記述不要
    display: block;
    */
}
#openContent {
    display: none;
}

@media screen and (min-width: 600px){

#openBtn {
    display: none;
}
#openContent {
    display: block;
}

JS(jQuery)

$(function(){

$("#openBtn").on("click",function(){
    $("#openContent").slideToggle();
});

});