私のコーデイングバイブル

アコーディオンを作ろう！（jQuery編）

目次

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

選択した項目が、その場で広がって、詳細内容を表示するメニューのことです。
限られた範囲で多数の項目を表示することができ、さらに詳細内容も表示することができるので。利便性が高い。

基本のhtml 

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<dl class="accordion">
    <dt class="accordion-title">メニュー</dt>
    <dd class="accordion-detail">メニューの中身</dd>
    <dt class="accordion-title">メニュー</dt>
    <dd class="accordion-detail">メニューの中身</dd>
    <dt class="accordion-title">メニュー</dt>
    <dd class="accordion-detail">メニューの中身</dd>
    <dt class="accordion-title">メニュー</dt>
    <dd class="accordion-detail">メニューの中身</dd>
    <dt class="accordion-title">メニュー</dt>
    <dd class="accordion-detail">メニューの中身</dd>
  </dl>
accordion-titleはクリック領域、accordion-detailはクリックされた際に展開される領域です。
HTMLタグはクリック（タップ）する領域と、オープンする領域があれば別のタグでも問題ありません。
しかし、アコーディオンはQ&Aなど定義と説明がセットになっているセクションに多く活用されますので、上記のようにdl タグを使うなど、コンテンツの意味に沿ったタグを選択するようにしましょう。

CSSの記述 

				
					/* リセットCSS */
* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* アコーディオンメニュー全体のサイズ・位置 */
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* クリック領域 */
.accordion-title {
  height: 50px;
  border-bottom: 1px solid #fff;
  background-color: #006400;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

/* クリックしたら表示される領域 */
.accordion-detail {
  display: none;
  padding: 2em 1em;
  background-color: #98FB98;
  text-align: center;
}
accordion-titleは初め非表示にしておきたいので、display: noneを指定しています。
非表示の指定はjQueryでもできますが、今回はjQuery側をなるべく簡潔にするためCSSの方で記述しています。

jQueryの記述 

				
					$(function () {
    $('.ac-parent').on('click', function () {
    $(this).next().slideToggle();
  });
});
簡単ですね～
すべて記述すると以下のようになります。

See the Pen アコーディオンメニュー by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.

矢印アイコンでアコーディオンメニューの開閉状態を明示する

CSSの記述

※HTMLは上述と同じです。
CSSはac-parentクラスのみ変更を加ます。 
				
					/* リセットCSS */
* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* アコーディオンメニュー全体のサイズ・位置 */
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* クリック領域 */
.accordion-title {
  height: 50px;
  border-bottom: 1px solid #fff;
  background-color: #006400;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;  /* 追加 */
}

/* 擬似要素で下三角形を作成 */
.accordion-title:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 45%;
	right: 30px;
	width: 10px;
	height: 10px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	transition: .3s;
}

/* オープン時にopenクラスを付与 */
.accordion-title.open:after {
	transform: rotate(225deg);
}

/* クリックしたら表示される領域 */
.accordion-detail {
  display: none;
  padding: 2em 1em;
  background-color: #98FB98;
  text-align: center;
}
矢印アイコンは扱いやすいように擬似要素で作成しています。
jQueryでopenクラスを付与した際には、擬似要素の矢印を逆方向に回転させています。

jQueryの記述 

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

    // 一つ開くと他は閉じるように
    $('.accordion-title').not($(this)).next('.accordion-detail').slideUp();
  });
});
toggleClassメソッドを使い「open」というクラスを付与しています。
toggleClassメソッドは、要素に対して指定したclassの有無を判定し、つけ外ししてくれるメソッドで（）内につけ外ししたいクラス名を記述します。
cssで用意していた、openクラスを付与した状態のスタイルと切り替え、クリックされていない要素からはopenというクラスを外す、という記述です。
not(this)で対象でない要素を指定し、removeClass(‘open’)でopenクラスを外します。

See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.

プラス/マイナスアイコンでアコーディオンメニューの開閉状態を明示する

CSSの記述

※HTMLは上述と同じです。
CSSはac-parentクラスのみ変更を加ます。 
				
					/* リセットCSS */
* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* アコーディオンメニュー全体のサイズ・位置 */
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* クリック領域 */
.accordion-title {
  height: 50px;
  border-bottom: 1px solid #fff;
  background-color: #006400;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;  /* 追加 */
}

/* ①プラスの横線 */
.accordion-title:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 24px;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
}

/* ②プラスの縦線 */
.accordion-title:after {
	content: "";
	position: absolute;
	top: 50%;
	/* 8px+12px-1px(幅2pxの半分) */
	right: 19px;
	width: 2px;
	height: 24px;
	background: #fff;
	transform: translateY(-50%);
	transition: .3s;
}

/* ③オープン時にopenクラスを付与（縦線を回転させて非表示に） */
.accordion-title.open:after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}

/* クリックしたら表示される領域 */
.accordion-detail {
  display: none;
  padding: 2em 1em;
  background-color: #98FB98;
  text-align: center;
}
それぞれ擬似要素の①beforeでプラスの縦線、②afterで横線を作っています。
③では②のafterにjQueryでopenクラスを付与した状態のスタイルを記述しています。

jQueryの記述 

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

    // 一つ開くと他は閉じるように
    $('.accordion-title').not($(this)).next('.accordion-detail').slideUp();
  });
});
jQueryは先ほどの応用①で記述したコードと全く同じ内容で完成します！

See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.

アコーディオンメニューの開閉状態をアイコンで明示する

メニューに対してクリックできる要素かどうかというのは、意外とわかりづらいもので、矢印や＋アイコンなど、一般的にクリック操作を促していることがわかるアイコンを仕様して、直感的にメニューが開けることを理解できる実装を心掛けましょう！

展開できるとわかる見た目にする

アコーディオンメニューは他要素とスタイルに差をつけて、目立つようにしておくことも重要で、周りのデザインと同化していると、アイコンなど装飾があったとしても、ユーザーに対して操作を促すパーツだと認識されずらくなります。
クリックしたら展開される、独立した要素だとわかるように色や枠線なども工夫が必要です。

何が表示されるかわかりやすい見出しにする

クリックされる要素に何が展開されるか明確にしておくことも重要です。
Q＆AだとQ（question）にあたる見出しや、内容に対するタイトルなど、ユーザーがクリックして中身を見た際にギャップを感じないよう、わかりやすい見出しにしておきましょう。
©office-one-scene.com