JavaScript
jQuery
アコーディオン

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

2021/03/06

( 更新日：2022/04/20 )

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>メニュー１</p>
      <ul>
        <li>コンテンツ１</li>
        <li>コンテンツ２</li>
        <li>コンテンツ３</li>
      </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $('.menu1').on('click', function () {
        $('li').slideToggle();
      });
    </script>
  </body>
</html>

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

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

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

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

<body>
  <h4 class="title">メニュー１</h4>
  <div class="menu">
    <ul>
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</li>
    </ul>
  </div>
  <h4 class="title">メニュー２</h4>
  <div class="menu">
    <ul>
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</li>
    </ul>
  </div>
  <h4 class="title">メニュー３</h4>
  <div class="menu">
    <ul>
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></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);
  });
});