(K)jQueryのslideToggleを使ってスマホに最適なアコーディオンメニューを作成

最近特にスマホの案件が増えてる・・・というよりも、セットで当たり前になってます。
スマホはディスプレイの表示領域がPCに比べて少ないので、ファーストビューはもちろん、スライドした下の領域も少ないスペースを有効に使って、ユーザーにいち早く情報を伝える必要があります。そんな訳で今回はjQueryのtoggleメソッドを使った定番のアコーディオンメニューを備忘録としてまとめておきます。

アコーディオンメニューはjQueryの「slideUp()」や「slideDown()」が一般的なようですが、今回はToggle()を使用して、アコーディオンメニューを実装させてみます。

toggleメソッドの概要

jQuery日本語リファレンスによると…

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。
jQuery日本語リファレンスより引用

ある要素に設定することによって、表示・非表示を切り替えるjQueryメソッドという事でおけっすか？
その他に「slideToggle」でslideDown/slideUpの動作や「toggleClass」でスイッチの切り替えとかができます。

「slideToggle」を使ってシンプルなアコーディオンメニューを作成

まず、元となるメニューをHTMLとCSSで組みます。

【HTML】

<ul class="accordion">
    <li>
        <p><span>ナビゲーション1</span></p>
        <ul>
            <li><a href=" #">ナビゲーション1-1</a></li>
            <li><a href=" #">ナビゲーション1-2</a></li>
            <li><a href=" #">ナビゲーション1-3</a></li>
        </ul>
    </li>
    <li>
        <p><span>ナビゲーション2</span></p>
        <ul>
            <li><a href=" #">ナビゲーション2-1</a></li>
            <li><a href=" #">ナビゲーション2-2</a></li>
            <li><a href=" #">ナビゲーション2-3</a></li>
        </ul>
    </li>
    <li>
        <p><span>ナビゲーション3</span></p>
        <ul>
            <li><a href=" #">ナビゲーション3-1</a></li>
            <li><a href=" #">ナビゲーション3-2</a></li>
            <li><a href=" #">ナビゲーション3-3</a></li>
        </ul>
    </li>
</ul>

【CSS】

li{
     list-style: none;    
}

ul.accordion{
     width:100%;
     overflow: hidden;
}

ul.accordion ul{
     display: none;
}    


ul.accordion li p{
     background: #F70841;
     padding:10px 20px;
     border-bottom: 1px solid #b3032d;
     cursor: pointer;/*カーソルを通常の物に*/    
}

ul.accordion ul li{
     background: #ff89a5;
     padding:10px 20px;
     border-bottom: 1px dashed #fff;    
}

ul.accordion ul li:last-child{
     border:none;
}

「ul.accordion ul」を「display:none;」で非表示にさせて、Toggleを使って「display:block;」と切り替える動きです。
そのためのコードは以下（当然、本チャンの「jquery.js」が読み込まれてるのが大前提です）



<script>
    $(function(){
        $(".accordion p").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

「slideToggle()」のカッコの中に”fast”、”normal”、”slow”、”1000（数値入力）”をすれば、スピードの調整も可能です。

DEMO

「toggleClass」を使ってオープン時とクローズ時の画像を切り替える

このままでもいいんですが、メニューが開いてる状態と閉まってる状態を切り替えた方がユーザビリティー的にもいい場合があります。そういう時は「toggleClass」を追加します。

【HTML】
さっきと同じ

【CSS】※追加部分のみ

ul.accordion li p{
     background-image: url(img/open.png);
     background-repeat: no-repeat;
     background-position: 97% center;
     background-size: 22px;
}

ul.accordion li p.active{
          background-image: url(img/close.png);
}

さっきのCSSコードにこのコードを入れればOKです。background画像として矢印の画像を指定して、active時の画像も指定しているだけです。

【Javascript】※全文

<script>
    $(function(){
        $(".accordion p").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");     //追加した一文
        });
    });
</script>

DEMO