jQuery

【jQuery】ひとつだけ展開+矢印も一緒に動くアコーディオンの実装

悩む人
悩む人
jQueryを使ってアコーディオンを実装したいけど、全部開いてしまうし、矢印もうまく動かない・・・。

ひとつの要素だけ開きつつ、矢印も一緒に動くアコーディオンを作る方法が知りたいな・・。

 

こんなお悩みに答えます。

 

jQueryでアコーディオンを作るのは基本ですが、中でも、「ひとつの要素だけ開く」や「矢印も一緒に動く」など、少し応用が入ってくると手が止まってしまいますよね。

 

僕も、iSaraの模写をしていまして、正直めちゃくちゃ苦戦しました。

 

今回のアコーディオン実装の条件としては、

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

こんな感じを実現したいです。

それでは解説していきましょう。

 

ひとつだけ展開して矢印も一緒に動く

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

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

見にくければ大きな画面がご確認ください

 

これをコピペしてくださいと言ってしまえばこれで終わってしまうので、少しだけ解説していきます。

 

ひとつの要素だけを展開する

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を展開、開いていれば閉じる
  
  });
});

 

 

一つの要素だけを展開するには、jQueryに記述します。

 

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

この記述をすることで、クリックした要素以外を閉じることができます。

not(this)の部分がそうですね。

 

矢印も一緒に動く

.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クラスがついた時の要素の角度を指定 */
}
矢印は、CSSで作ります。

擬似要素で作り、positionで位置を指定します。

 

矢印を作るポイントとしては、

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

 

これでまず擬似要素の上部と右側に4pxのボーダーを作ります。

 

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

transform: rotate(135deg);で、要素の角度を調整し、下向けの矢印に変更します。

 

 

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

 

あとは、親要素に.openクラスがついた時のスタイルを記述すれば、矢印も一緒に動くアコーディオンが完成します。

 

使い回せるようにストックしておこう

今回のコードは、iSaraのスタイルを参考に作りましたが、どのサイトでも使われるような汎用的なスタイルだと思っています。

これができると、応用も対応しやすいし、ストックしてすぐに使えるようにしておきたいですね。