[初学者向け] jQueryでアコーディオンの実装方法

##はじめに
jQueryを使用したアコーディオンの実装方法を、初学者の方にもわかりやすいように丁寧に解説します。
完成形はこちらです。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="yuzuyuzu0830" data-slug-hash="OJXdmjv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="OJXdmjv">
  <span>See the Pen <a href="https://codepen.io/yuzuyuzu0830/pen/OJXdmjv">
  OJXdmjv</a> by yuzuyuzu0830 (<a href="https://codepen.io/yuzuyuzu0830">@yuzuyuzu0830</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

矢印つきで、一番上のコンテンツは開いた状態にします。
また、他のコンテンツが開いた時には、開いていたコンテンツは閉じるように実装していきます。

##HTML/CSSを書く
わかりやすくするため、シンプルなコードを書いていきます。
まずはHTMLから

```HTML:index.html

<div class="ac">
  
 <div class="ac-title">タイトル1</div>
  <div class="ac-content open">
   <p>タイトル1の内容</p>
  </div>
  
 <div class="ac-title">タイトル2</div>
  <div class="ac-content">
   <p>タイトル2の内容</p>
  </div>
  
 <div class="ac-title">タイトル3</div>
  <div class="ac-content">
   <p>タイトル3の内容</p>
  </div>

</div>
```

acクラスでアコーディオン全体を囲っています。
ac-titleがクリックをする箇所、ac-contentがクリックをした時に見える内容です。

また、一番上ののac-contentにのみopenクラスもつけています。こちらは、一番上のコンテンツは開いた状態にしておくためです。この後CSSで解説します。


続いてCSSです。

```CSS:style.css
/* アコーディオンのサイズ */
.ac {
  width: 100%;
  max-width: 500px;
}

/* クリックする箇所 */
.ac-title {
  height: font-size: 15px;
  background-color: #FFCCFF;
  position: relative;
  padding: 10px;
}

/* 矢印 */
.ac-title:after {
   content: "";
   position: absolute;
   right: 25px;
   top: 38%;
   transition: all 0.2s ease-in-out;
   width: 8px;
   height: 8px;
   border-top: 2px solid #000;
   border-right: 2px solid #000;
   transform: rotate(135deg);
 }

/* 開いた時に矢印の向きを変える */
.ac-title.open:after {
  transform: rotate(-45deg);
}

/* 隠れているコンテンツ */
.ac-content {
  background-color: #FFFFCC;
  padding: 15px 10px;
  display: none;
}

/* 一番上のコンテンツは開いた状態にしておく */
.open {
display: block;
}

 ```
.ac-contentは隠れている状態にしたいので、`display: none`で見えない状態にしています。
ただ、一番上のコンテンツははじめから開いている状態にしたいので、先ほど一番上の.ac-titleだけにつけたopenクラスは`display: block`で見えている状態にしています。

また、矢印は擬似要素で作成しています。
`border-top`と`border-right`で線を作成し、`rotate`で回転させています。
コンテンツが開いたときは矢印の向きを変えたいので、こちらも`rotate`の数値を変更することで向きが変わる仕組みになっています。

##jQueryを書く

```js:js

$(function() {
 $('.ac-title:first-of-type').addClass('open');
  // クリックでコンテンツを開閉する
 $('.ac-title').on('click', function() {
  $(this).next().slideToggle();
   // 矢印の向きを変える
 $(this).toggleClass('open');
   // クリックしていないac-title以外のコンテンツからopenをとり、コンテンツを閉じる
 $('.ac-title').not($(this)).removeClass('open').next().slideUp();
 });
});
```

解説していきます。

```js
$('.ac-title:first-of-type').addClass('open');
```

まず、一番上のコンテンツはcssで`display: block`により見える状態にしましたが、矢印の向きは閉じている時と同じ状態になっています。
そのため、一番上のac-titleにだけ`addClass`でopenクラスをつけることにより、矢印の向きもコンテンツが開いてる時の向きに変更します。

```js
$('.ac-title').on('click', function() {
  $(this).next().slideToggle();
```
.ac-titleを`click`した時の動きを指定しています。
thisはac-titleのことです。`.next()`は隣の要素を指すので、今回の場合はac-contentになります。
また、`.slideToggle()`は要素をアップダウンさせるメソッドです。そのため、ac-contentが表示されていなければslideUpをし、要素が表示されていればslideDownをしてくれます。
その切り替えを`click`によって行なっています。

```js
$(this).toggleClass('open');
```

`.toggleClass()`は要素に対してクラスのつけ外しをしてくれるメソッドです。
この場合は、openクラスがついていなければopenクラスを付与し、付与されていればopenクラスを外してくれます。
先ほど、cssでopenクラスがついている時は矢印の向きが変わるように指定したので、openクラスのつけ外しにより、矢印の向きを変更することができます。

```js
$('.ac-title').not($(this)).removeClass('open').next().slideUp();
```

`.removeClass()`によってクリックされていない要素からは、openクラスを外すことができます。そして、`.next()`は隣の要素を指すので、ac-contentを`.slideUp()`メソッドにより閉じています。

##最後に
今回はjQueryを使用してアコーディングメニューを作成する方法をご紹介しました。
HTML/CSSはかなりシンプルな構成になっているので、ご自身のデザインに合わせて変更をしてみてください。