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

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

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

今回は「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はメソッドなどが豊富で、本当に使いやすいと思います。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント