けんと 
魔物が現れた
よくある質問の項目を、アコーディオンメニューで作りたい！
けんと
説明しよう！
今回はjQueryを使用して質問に対する回答をクリックして表示する方法を解説します。
コードも分解して解説するのでコピペしていつも使っているから、どういう仕組で表示しているのかわからないよ〜という方にも見ていただければと思います。
アコーディオンメニューを実装する
See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.
まずは実装したものをご覧ください。
クリックすると回答が表示され、プラスマークがマイナスマークに切り替わります。
クリックする領域がプラスマーク部分だけにするとユーザーに対して不親切となるので質問の全体をクリック領域としています。
コード解説
HTMLのコードについて
<div class="question__inner">
<div class="question__text js-open">質問1</div>
<div class="question__reply">回答</div>
</div>アコーディオンメニューのワンセットだけ抜粋しました。
質問の部分のクラス名に「js-open」といれて、ここをクリックするとjQueryが動作するようになっています。
それと、質問と同じ階層のひとつ下の回答を入れるようにします。
jQueryの記述で質問と同じ階層かつ一つ次の要素に動作を反映させるためです。
CSSのコードについて
/* 回答の見た目 */
.question__reply {
display: none;
background-color: rgb(202, 86, 111);
}
/* 回答表示時にプラスマークの縦部分を消す */
.question__text.open::after {
top: 25%;
opacity: 0;
transform: rotate(90deg);
}jQueryに関する部分を抜粋しました。
まずは、回答を「display: none;」で非表示にします。
プラスマークの縦部分に「open」がついたら回転しながら非表示にします。
jQueryのコードについて
$(function () {
// 対象要素 / on = イベントを発生させる / クリックイベント
$('.js-open').on('click', function () {
// $(this)でクリックされた「.js-open」のみに反映
// .next()でクリックした要素の次の要素を指定「js-open」→「question__reply」
// .slideToggle()→スライドして表示 / 非表示切り替え
$(this).next().slideToggle();
// toggleClassでopenがあれば外す。無ければつける。
$(this).toggleClass("open");
});
});1. まずは「js-open」をクリックした時と定義します。
2. クリックされた「js-open」のみに対して、その次の要素をスライドで表示/非表示で切り替える。
<div class="question__inner">
<div class="question__text js-open">質問1</div>
<!-- ↓「js-open」の次の要素 -->
<div class="question__reply">回答</div>
</div>3. 最後に「open」があれば外し、無ければ付けてプラス / マイナスマークを切り替えます。
まとめ
今回はアコーディオンメニューについて解説いたしました。
ご参考になれば幸いです。ありがとうございました。