プログラミング今回はFAQ(よくある質問)にアコーディオン機能を実装します。質問をクリックするとその答えがスライドして表示/非表示されます。読者の悩みjQueryでアコーディオンメニューを作って見たいけどやり方がわからない...HTML・CSSしかわからないけど大丈夫かな簡単で色々なUI作成に応用できる便利なサンプルあるかなこういった疑問に答えます。記事を読み終えるとアコーディオンメニューの実装方法が一通り理解でき、基礎的なメソッドを知っておけば簡単に作ることができますコピペ可能なサンプルものせておりますので、使い回しできるコードを知ることができますこの記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。いった僕が、分かりやすく解説していきます。骨組みは以下の3つです。アコーディオンの準備(1)アコーディオンの準備(2)アコーディオンの完成デモページを用意デモページを用意してますので実際に動きが確認できます。DEMOまた、GitHubにも実際のソースコードをアップしているのでクローンできます。jQuery]を確認できてコピペできます。サンプルコードはSCSSですがCSSを見たい場合は、GitHubにコンパイルされてないCSSファイルがありますのでご覧ください。デモページとソースコードを確認しながらご覧ください。コードを見ていきます。...});アコーディオンの準備(2)hasClassメソッドhasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。$(this).find('.c-accordion__answer');$answer.hasClass('open');※openクラスについて「フラグを立てる」為に便宜的に「open」という単語を使っているだけで適当な名前にしても動きます。処理の流れとして最初にページをロードした時に「open」classは存在しないので初期のクリックはelseのブロックを発火させていて、そこで「open」クラスをaddClassで勝手に追加設定しています。答えの表示・非表示は以下のようにif文を用いて行います。質問をクリックした時に、$('.answer')がすでにopenクラスを持っていれば、(質問の答えが現在表示されていると判断できるので)openクラスを外し、答えを隠します。openクラスがない場合はその逆です。...}アコーディオンの完成アコーディオンのスライド操作if文がtrueの時(下図で答えが表示されている時)、答えの部分はslideUpメソッドを用いて隠し、質問の右にある「-」記号は「+」記号に書き換えます。反対にif文がfalseの時は、答えをslideDownメソッドで表示し、「+」記号は「-」に書き換えましょう。}});今回は以上になります。次回はもう少し短いコードで違うメソッドを使用したアコーディオンを実装する方法をご紹介します。作成方法が不安な方は是非参考にしていただけると嬉しいです。