【jQuery】一つだけ展開＋矢印も同時に動くアコーディオンの実装

jQueryを使って、アコーディオンを実装する方法について記録しておきます。
アコーディオンの条件

• 一つだけ展開し、他の要素は閉じる
• 矢印も一緒に動く

こんな感じで実装する方法です。

一つだけ展開し、矢印も一緒に動く

See the Pen RXoVyx by kei (@kei_01011) on CodePen.

実際にクリックしていただければわかりますが、１つの要素が展開されている時には、他の要素は閉じるようになっています。

一つの要素だけを展開する

jQuery(function ($) {
  $(".answer").css("display", "none");
  // 質問の答えをあらかじめ非表示



  //質問をクリック
  $(".question").click(function () {

    $(".question").not(this).removeClass("open");
    //クリックしたquestion以外の全てのopenを取る

    $(".question").not(this).next().slideUp(300);
    //クリックされたquestion以外のanswerを閉じる

    $(this).toggleClass("open");
    //thisにopenクラスを付与

    $(this).next().slideToggle(300);
    //thisのanswerを展開、開いていれば閉じる

  });
});

$(".question").not(this).next().slideUp(300);でクリックした要素以外を閉じる。
not'(this)でクリックした要素以外を指定し、slideUpで隠します。

矢印も一緒に動く

シンプルにCSSで矢印を作るパターンを実装します。
擬似要素を使って矢印を作ります。

.question:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
/*   要素の動きを指定 */

  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 4px #000;
  border-right: solid 4px #000;

  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
/* transform: rotateで要素の角度を指定 */

}

.question.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
/*   .openクラスがついた時の要素の角度を指定 */
}

.openクラスがついたときに、transform: rotateで要素の角度を変更すれば、矢印も一緒に動くようになります。

JavaScriptでもjQueryでも、addClassやremoveClassを使った操作は基本だと思います。CSSを使った矢印の他に、FontAwesomeを使ったものでも応用が可能です。