jQueryを使って、アコーディオンを実装する方法について記録しておきます。
アコーディオンの条件
- 一つだけ展開し、他の要素は閉じる
- 矢印も一緒に動く
こんな感じで実装する方法です。
##一つだけ展開し、矢印も一緒に動く
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を展開、開いていれば閉じる
});
});
$(".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を使ったものでも応用が可能です。