JavaScript

【コードで解説】jQueryでアコーディオンメニューを作る方法を解説

Webサイトを閲覧していると、クリックすると下に文字が表示されるUIを見たことがあると思います。Q&Aや企業サイトのメニューなどでよく見られます。下や横にスライドしながら文字が現れる機能はアコーディオンメニューと呼ばれます。

Web制作においてアコーディオンメニューは便利な機能の1つです。カテゴリーに合わせてメニューをまとめたり、ユーザーが見たいところだけを表示することで、ページを広くしすぎないなど利点があります。

本記事では、jQueryでアコーディオンメニューを作る方法を解説します。

アコーディオンメニューとは

アコーディオンメニューとはある要素をクリックすると下や横に文字が表示される機能をいいます。楽器のアコーディオンのように開いたり閉じたりすることから名付けられました。

スマホの普及によりレスポンシブデザインが主流になり、狭い画面にたくさんの情報が表示されるようになりました。全ての情報が表示されていると本当に欲しい情報を得るために時間がかかります。

アコーディオンメニューを使うことでユーザーが本当に欲しい情報だけを選択・表示されるようになります。ユーザー目線の設計をするために非常に有効な機能です。

アコーディオンメニューの基本的な作り方

アコーディオンメニューを作るには「toggle」というメソッドを使います。toggleは表示非表示を切り替える機能を持っています。クリックイベントと組み合わせることで簡単に作ることができます。

基本構文は以下の通りです

$(“セレクタ”).on(“click”,function(){
 $(“表示させるセレクタ”).toggle();
});

toggleについては下のリンクに詳しく書いているので、参考にして下さい。

【toggle】jQueryで表示非表示の切り替え方法を解説

サンプルコードも記載するので、コピー&ペーストしてブラウザ上で動きを確認してみて下さい。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アコーディオンメニュー</title>
    <style>
        li {
            display: none;
        }
    </style>
</head>

<body>
    <div class="menu1">
        <p>メニュー1</p>
        <ul>
            <li>コンテンツ1</li>
            <li>コンテンツ2</li>
            <li>コンテンツ3</li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script>
        $(".menu1").on("click", function () {
            $("li").slideToggle();
        });
    </script>
</body>

</html>

アコーディオンメニューの応用

別のメニューが開いたら閉じる

基本的な作り方では1つのアコーディオンメニューを開いたり閉じたりする機能を紹介しました。発展形として、1つのアコーディオンメニューを開いたら、他のメニューが閉じる機能をつけます。

他の部分を閉じることで、縦に長くなる等の問題が解消されます。コード例を下に示すので、一度試してください。

<body>
    <h4 class="title">メニュー1</h4>
    <div class="menu">
        <ul>
            <li>コンテンツ1</li>
            <li>コンテンツ2</li>
            <li>コンテンツ3</li>
        </ul>
    </div>
    <h4 class="title">メニュー2</h4>
    <div class="menu">
        <ul>
            <li>コンテンツ1</li>
            <li>コンテンツ2</li>
            <li>コンテンツ3</li>
        </ul>
    </div>
    <h4 class="title">メニュー3</h4>
    <div class="menu">
        <ul>
            <li>コンテンツ1</li>
            <li>コンテンツ2</li>
            <li>コンテンツ3</li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            $(".menu").css("display", "none");
            $(".title").on("click", function () {
                $(".title").not(this).removeClass("open");
                $(".title").not(this).next().slideUp(300);
                $(this).toggleClass("open");
                $(this).next().slideToggle(300);
            });
        });
    </script>
</body>

マウスポインタが乗ったときに開く

マウスポインタが乗ったときにアコーディオンメニューが開いて、外れると閉じる機能を紹介します。クリックをhoverにするだけでマウスの動きで開いたり閉じたりします。

サンプルコードは以下の通りです。<body>部は上の「別メニューを開いたら閉じる」をコピー&ペーストしてください。

 $(function(){
   $(".menu").css("display","none");
      $(".title").hover(function(){
        $(".title").not(this).removeClass("open");
        $(".title").not(this).next().slideUp(300);
        $(this).toggleClass("open");
        $(this).next().slideToggle(300);
      });
    });

まとめ

jQueryでアコーディオンメニューを作る方法について解説しました。理解していただけたでしょうか。アコーディオンメニューは様々なサイトに使われており、目にする機会が多いと思います。それだけ、需要が多いということです。

今後、Web制作をする上で理解しておけば、クライアントの要求に答えることができたり、開発時間を短くすることができます。

是非本記事を参考に実装してみてください。