MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

アコーディオンメニューの作り方を解説(jQuery)

どうも、ダイチです。

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

汎用的な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は展開領域です。ここまででだと下の画像のような感じになります。

アコーディオンCSSまで記述

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 () {

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

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

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

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

そしてjQueryの必殺技(勝手に呼んでる)toggleシリーズのslideToggleで、非表・示要素を制御しています。

この時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)
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)どうも、ダイチです。今回はスマートフォンやタブレット向けのWebサイトで採用されることの多いナビゲーションUI「ハンバーガーメニュー」の作り方をまとめました。最近...

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

基本的なコーディングがまだ不安な方は、書籍や動画教材で勉強するのがオススメです!僕が実際に購入したものも含めてまとめている記事を紹介します。

あわせて読みたい
Web制作学習でおすすめの本を紹介!(コーディング・Webデザイン)
Web制作学習でおすすめの本を紹介!(コーディング・Webデザイン)どうもダイチです!今回はWeb制作関連のオススメ書籍を紹介します!オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。とは...
あわせて読みたい
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】当記事では動画学習教材「Udemy」について、Webデザイン・Web制作に関連する優良講座を紹介します!世の中には学習教材が数多くあるので、特に独学の方はどれを選んだら...

それでは今回はこのへんで!

アコーディオンメニューの作り方を解説(jQuery)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる