slideToggleでアコーディオン風メニューを表示する

技術情報

2015.12.012017.03.28

メニューが長すぎるのでクリックした時だけ表示したい、という場合があると思います。

今回は「slideToggle」を使用してアコーディオン風にメニューを表示する方法をご紹介いたします。

サンプル
ソースと解説
まとめ

サンプル

「メニュー見出し」をクリックするとメニューが表示されます。

サンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

$(function(){

    $("#accordion dt").on("click", function() {

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

        $(this).next().slideToggle(200);

    });

});

「#accordion」要素をクリックしたときスライド表示がされます。

クリック時に「open」というクラスか加えられ、アイコンが変化します。

「slideToggle(200)」の「200」でメニューを表示する速度が決定されます。数字を変更することでメニューの表示速度を調節することが可能です。

html

<dl id="accordion">
    <dt>
        メニュー見出し
    </dt>
    <dd>
        <ul>
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
    </dd>
</dl>

「dt」が見出し、「dd」内が表示されるメニューとなります。

css

デフォルトの打ち消しと、見出し、メニューのスタイルに分かれます。

dl,dd,ul,li {
    margin: 0;
    padding: 0;
}

#accordion dt {
    display: inline-block;
    padding-left: 20px;
    background: url("icon_arr_r.png") no-repeat 0 center;
    cursor: pointer;
}

#accordion dt.open {
    background: url("icon_arr_u.png") no-repeat 0 center;
}

#accordion dd {
    display: none;
    padding-left: 40px;
}

デフォルトのスタイルを打ち消しています。

dl,dd,ul,li {
    margin: 0;
    padding: 0;
}

メニューの見出しのスタイルです。「open」というクラスが加えられた時に、アイコンを変更するようにしています。

#accordion dt {
    display: inline-block;
    padding-left: 20px;
    background: url("icon_arr_r.png") no-repeat 0 center;
    cursor: pointer;
}

#accordion dt.open {
    background: url("icon_arr_u.png") no-repeat 0 center;
}

メニューのスタイルです。「display: none;」で見出しがクリックされるまでは、メニューを非表示にしています。

#accordion dd {
    display: none;
    padding-left: 40px;
}

全ソース

jqueryは「jquery-1.11.3.min.js」を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
    slideToggleでアコーディオン風メニューを表示する
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){

    $("#accordion dt").on("click", function() {

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

        $(this).next().slideToggle(200);

    });

});
</script>
<style type="text/css">
dl,dd,ul,li {
    margin: 0;
    padding: 0;
}

#accordion dt {
    display: inline-block;
    padding-left: 20px;
    background: url("icon_arr_r.png") no-repeat 0 center;
    cursor: pointer;
}

#accordion dt.open {
    background: url("icon_arr_u.png") no-repeat 0 center;
}

#accordion dd {
    display: none;
    padding-left: 40px;
}
</style>
</head>
<body>

<h1>
    slideToggleでアコーディオン風メニューを表示する
</h1>

<dl id="accordion">
    <dt>
        メニュー見出し
    </dt>
    <dd>
        <ul>
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
    </dd>
</dl>

</body>
</html>

まとめ

ソースはjs、html、cssの3つ。
「#accordion」要素をクリックしたときスライド表示がされる。
クリック時に「open」というクラスか加えられ、アイコンが変化する。
「slideToggle(200)」の「200」の数字を変更することで、メニューの表示速度を調節することが可能。
「display: none;」で見出しがクリックされるまでは、メニューを非表示にしている。
jqueryは「jquery-1.11.3.min.js」を使用。

アコーディオン風のメニューはメニュー数が多い時に重宝します。

「jquery.cookie.js」を使用すれば、メニューの開閉状態を保持することも可能です。

jqueryはメソッドなどが豊富で、本当に使いやすいと思います。