2024.01.05
2024.08.04
- Webデザイン

【jQuery】アコーディオンメニューの作り方解説（複数パターン紹介）

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

今回はアコーディオンメニューの作り方をまとめています。

汎用的なUIですが、jQueryの使い方を理解できてない方だと難しく感じてる方もいるかもしれません。

この記事ではいくつかパターンに分けて解説付きで紹介していますので、アコーディオン実装方法も理解できるようになってます。

コード解説もしますが、めちゃくちゃ簡単にできてしまうので、コピペして使い回しちゃいましょう！

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

アコーディオンメニューはメニューをクリック（タップすると）非表示になっている内容が連動して開放されるUIです。

下に埋め込んでいるようなものがアコーディオンメニューです。クリック（タップ）してみてもらうと非表示の要素が表示されます。

DEMO1

メニュー1: メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身
メニュー2: メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身
メニュー3: メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身
メニュー4: メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身

アコーディオンメニューの基本構成

HTML

<dl class="ac">
    <dt class="ac-parent">メニュー1</dt>
    <dd class="ac-child">メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身</dd>
    <dt class="ac-parent">メニュー2</dt>
    <dd class="ac-child">メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身</dd>
    <dt class="ac-parent">メニュー3</dt>
    <dd class="ac-child">メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身</dd>
    <dt class="ac-parent">メニュー4</dt>
    <dd class="ac-child">メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身</dd>
</dl>

HTMLは、クリックするエリアと展開された時のエリアが交互に記述されていればなんでも動作はします。

解説記事によってはここをdivでやってたりul>liタグでやってたりしますが、アコーディオンで展開するコンテンツの意味に合わせて使い分けましょう。今回はdlタグで記述しています。

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ac {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}
.ac-parent {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #6b90ff;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  transition: .3s;
}
.ac-child {
  padding: 2em 1em;
  background-color: #d3deff;
}

※hover装飾は割愛してます。

.acがアコーディオン全体の表示領域、.ac-parentはクリック領域で.ac-childは展開領域です。ここまででだと下の画像のような感じになります。

jQuery

次にjQueryです。

$(function () {
  $('.ac-child').css("display", "none");
  $('.ac-parent').on('click', function () {
    $(this).next().slideToggle();
  })
});

一行ずつみていきます。

$('.ac-child').css("display", "none");

まずは展開領域の要素を非表示にします。これはCSSに記述してもいいです。（今回jQueryのほうが記述が短く、把握しやすいかと思ったのでこちらで制御します）

$('.ac-parent').on('click', function () {

クリック領域のクラスに対してクリックされた時に動作する、というイベントを設定します。

こちらの記事もチェック

>> jQueryのclickイベントとは？on()との違いも解説！

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

クリックされた要素（this）の次の要素をslideToggleさせる、という内容ですね。

next()は対象要素の次に配置されている要素だけを取得してくれます。

そしてtoggleシリーズのslideToggleで、非表・示要素を制御しています。

こちらの記事もチェック

>> jQueryのtoggleを活用したいろいろなUIパターンの実装方法

この時slideUpとslideDownの動きで切り替えしてくれるので、アコーディオンメニューの展開にはもってこいですね。

これで基本系の形はできあがりました。簡単ですね！

一つ開くと他は閉じるアコーディオン

DEMO2

メニュー1: メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身
メニュー2: メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身
メニュー3: メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身
メニュー4: メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身

クリックのイベント内に下の1行だけ追記します。

$('.ac-parent').not($(this)).next('.ac-child').slideUp();

not($(this))でクリックされていない要素を取得して、その要素のnext(‘.ac-child’)＝次のac-childクラスを、slideUpさせます。

1つ目だけ開いておくアコーディオン

DEMO3

メニュー1: メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身
メニュー2: メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身
メニュー3: メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身
メニュー4: メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身

  // $('.ac-child').css("display", "none");　　←削除
  $(".ac-child:not(:first-of-type)").css("display", "none");

初期状態ですべての中身を非表示にしていましたが、上記記述に変えることで1つ目以外を非表示にさせます。

擬似クラス:notは()内の要素以外という指定になるので、first-of-typeとすることで1つ目以外を、という制御になります。

コンテンツの中に閉じるボタンがあるアコーディオン

DEMO4

メニュー1: メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の
閉じる
メニュー2: メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の
閉じる
メニュー3: メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の
閉じる
メニュー4: メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の
閉じる

HTML/CSSにそれぞれ下記内容を追記します。

この閉じるボタンはac-childクラスの子要素として中に記載してください。

<dl class="ac">
    <dt class="ac-parent">メニュー1</dt>
    <dd class="ac-child">メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身
      <button type="button" class="close">閉じる</button>
    </dd>
    <dt class="ac-parent">メニュー2</dt>
    <dd class="ac-child">メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身
      <button type="button" class="close">閉じる</button>
    </dd>
    <dt class="ac-parent">メニュー3</dt>
    <dd class="ac-child">メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身
      <button type="button" class="close">閉じる</button>
    </dd>
    <dt class="ac-parent">メニュー4</dt>
    <dd class="ac-child">メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身
      <button type="button" class="close">閉じる</button>
    </dd>
  </dl>

/* アコーディオン内閉じるボタン */
.close {
	display: block;
	width: 100px;
	margin: 3em auto 0;
	padding: .5em 0;
	border-radius: 5px;
	background-color: #6b90ff;
	text-align: center;
	cursor: pointer;
	transition: .3s;
}

次にjQueryです。

$(function () {
  $('.ac-child').css("display", "none");
  $('.ac-parent').on('click', function () {
    $(this).next().slideToggle();
    $('.ac-parent').not($(this)).next('.ac-child').slideUp();
  })
  $('.close').on('click', function () {
    $(this).parent('.ac-child').slideUp(); // クリックされたボタンの親要素にあたる.ac-childはslideUpで閉じる
  })
});

閉じるボタンcloseクラスをクリックした時、クリックされたボタンの親要素にあたる.ac-childをslideUpさせる、という内容です。

parentメソッドはその親要素を取得します。

当然ですが、閉じるボタンをac-childクラスの子要素として記述してない場合は作動しないので注意してください。

クリック要素に開閉状態が分かるアイコンをつける

DEMO5

メニュー1: メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身メニュー1の中身
メニュー2: メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身メニュー2の中身
メニュー3: メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身メニュー3の中身
メニュー4: メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身メニュー4の中身

CSSに下記内容を追記して＋と−ボタンを作成します。クリックする親要素をposition: relativeとします。次にbeforeで横線、afterで縦線をスタイリングします。

.ac-parent {
　position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #6b90ff;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  transition: .3s;
}
.ac-parent:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  /*横線*/
  width: 24px;
  height: 2px;
  background: #fff;
}
.ac-parent:after {
  content: "";
  position: absolute;
  top: 50%;
  /* 8px+12px-1px(幅2pxの半分) */
  right: 19px;
  transform: translateY(-50%);
  transition: all .3s;
  /*縦線*/
  width: 2px;
  height: 24px;
  background: #fff;
}

さらにクリックされた時のスタイルをopenクラスとして下に用意しておきます。今回は縦線を横に90°傾けてopacity: 0で透明にします。このクラスはjQueryでつけ外しします。

/* 縦線（after）だけ縦回転させる */
.ac-parent.open:after {
  top: 25%;
  transform: rotate(90deg);
  opacity: 0;
}

次にクラスのつけ外しをするjQueryです。クリックのイベント内に追記します。

$(function () {
  $('.ac-child').css("display", "none");
  $('.ac-parent').on('click', function () {
    //openクラスをつける
    $(this).toggleClass('open', 800);
    //クリックされていないac-parentのopenクラスを取る
    $(".ac-parent").not(this).removeClass("open");
    $(this).next().slideToggle();
    $('.ac-parent').not($(this)).next('.ac-child').slideUp();
  })
});

$(this).toggleClass(‘open’, 800)でクリックされた要素にopenクラスを付与します。800は0.8秒の時間指定です。

toggleClassは指定された要素に指定されたクラスが有るか判定し、状態に合わせてaddClassとremoveClassを交互に行ってくれます。

ただこれだけだと、一度クリック要素（ac-parentクラス）をクリックして付与されたopenクラスは、同じ場所をクリックしないと外されません。

開く要素は一つにしておきたいアコーディオンメニューの場合、他要素が閉じると同時にアイコンに付与されたopenクラスも外しておきたいです。

なので、$(“.ac-parent”).not(this)〜〜でクリックされていない要素を指定し、removeClass(“open”)でopenクラスを外すようにしておきます。（基本形のように開かれっぱなでよければこの記述は不要です）

多階層で展開するアコーディオン

DEMO6

メニュー1

メニュー1-1: メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身
メニュー1-2: メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身
メニュー1-3: メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身

メニュー2

メニュー2-1: メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身
メニュー2-2: メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身
メニュー2-3: メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身

メニュー3

メニュー3-1: メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身
メニュー3-2: メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身
メニュー3-3: メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身

メニュー4

メニュー4-1: メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身
メニュー4-2: メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身
メニュー4-3: メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身

dd class=”ac-child”の中に、下層メニューのdlを入れ込んでいます。

__itemクラスが下層のクリック要素で、__descriptionクラスがコンテンツとしています。

<dl class="ac">
    <dt class="ac-parent">メニュー1</dt>
    <dd class="ac-child">
      <dl>
        <dt class="ac-child__item">メニュー1-1</dt>
        <dd class="ac-child__description">メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身メニュー1-1の中身</dd>
        <dt class="ac-child__item">メニュー1-2</dt>
        <dd class="ac-child__description">メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身メニュー1-2の中身</dd>
        <dt class="ac-child__item">メニュー1-3</dt>
        <dd class="ac-child__description">メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身メニュー1-3の中身</dd>
       </dl>
    </dd>
    <dt class="ac-parent">メニュー2</dt>
    <dd class="ac-child">
      <dl>
        <dt class="ac-child__item">メニュー2-1</dt>
        <dd class="ac-child__description">メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身メニュー2-1の中身</dd>
        <dt class="ac-child__item">メニュー2-2</dt>
        <dd class="ac-child__description">メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身メニュー2-2の中身</dd>
        <dt class="ac-child__item">メニュー2-3</dt>
        <dd class="ac-child__description">メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身メニュー2-3の中身</dd>
      </dl>
    </dd>
    <dt class="ac-parent">メニュー3</dt>
    <dd class="ac-child">
      <dl>
        <dt class="ac-child__item">メニュー3-1</dt>
        <dd class="ac-child__description">メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身メニュー3-1の中身</dd>
        <dt class="ac-child__item">メニュー3-2</dt>
        <dd class="ac-child__description">メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身メニュー3-2の中身</dd>
        <dt class="ac-child__item">メニュー3-3</dt>
        <dd class="ac-child__description">メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身メニュー3-3の中身</dd>
      </dl>
    </dd>
    <dt class="ac-parent">メニュー4</dt>
    <dd class="ac-child">
      <dl>
        <dt class="ac-child__item">メニュー4-1</dt>
        <dd class="ac-child__description">メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身メニュー4-1の中身</dd>
        <dt class="ac-child__item">メニュー4-2</dt>
        <dd class="ac-child__description">メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身メニュー4-2の中身</dd>
        <dt class="ac-child__item">メニュー4-3</dt>
        <dd class="ac-child__description">メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身メニュー4-3の中身</dd>
      </dl>
    </dd>
  </dl>

下層メニューのスタイルだけ記述していますので、続きから追記していください。:afterで開閉状態がわかるアイコンをつけています。

/********* 下層メニュー *********/
.ac-child__item {
	position: relative;
	padding: 1em;
	border-bottom: 1px solid #fff;
	background-color: #fcee88;
	cursor: pointer;
}
/* 下層メニューアイコン */
.ac-child__item:after {
	content: "";
	display: block;
	position: absolute;
	top: 40%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	transform: translateY(-50%);
	transform: rotate(135deg);
	transition: all .3s;
}
/* 下層メニュー内テキストエリア */
.ac-child__description {
	padding: 1em;
	background-color: #fcf4b5;
}

上層と同じように、openクラスをつけた時に変化を与えた状態のスタイルです。閉じてる時は上三角で、開いてる時（openクラスをつけた時）は回転させて下三角にします。

/* 下層アイコン変化（openクラスを付与） */
.ac-child__item.open:after {
	top: 50%;
	transform: rotate(315deg);
}

13行目から下層メニューの部分です。構造的には上層と全く同じです。

$(function () {
  $('.ac-child').css("display", "none");
  $('.ac-parent').on('click', function () {
    //openクラスをつける
    $(this).toggleClass('open', 800);
    //クリックされていないac-parentのopenクラスを取る
    $(".ac-parent").not(this).removeClass("open");
    $(this).next().slideToggle();
    $('.ac-parent').not($(this)).next('.ac-child').slideUp();
  })
  // 下層メニューの制御
  $('.ac-child__description').css("display", "none");
  $('.ac-child__item').on('click', function () {
    $(this).next().slideToggle();
    $('.ac-child__item').not($(this)).next('.ac-child__description').slideUp();
    //openクラスをつける
    $(this).toggleClass('open', 800);
    //クリックされていないac-parentのopenクラスを取る
    $(".ac-child__item").not(this).removeClass("open");
  })
});

まとめ

今回はアコーディオンメニューの簡単なパターンについてまとめてみました。

タブメニューのように横並びのレイアウトや、横方向に展開するようなアコーディオンもありますが、CSSでスタイリングできていればjQueryはほぼ同じコードでいけます。

ハンバーガーメニューの記事でもまとめていますが、CSSで表示時と非表示時のレイアウトを用意しておいて、jQueryでクラスのつけ外しをする（つけ外しはtoggle系メソッドが便利）という、使い回しができる仕組みです。

こちらの記事もチェック

>> jQueryのtoggleを活用したいろいろなUIパターンの実装方法

Webサイトのコーディングには高確率で必要になるUIなので、サクッと実装できるように考え方を把握しておき、基本のコードもストックしておきましょう！

【jQuery】アコーディオンメニューの作り方解説（複数パターン紹介）

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

アコーディオンメニューの基本構成

HTML

CSS

jQuery

一つ開くと他は閉じるアコーディオン

1つ目だけ開いておくアコーディオン

コンテンツの中に閉じるボタンがあるアコーディオン

クリック要素に開閉状態が分かるアイコンをつける

多階層で展開するアコーディオン

まとめ

カテゴリ一覧