アコーディオンの実装について、忘備録です。
今までにも何度も実装しているはずですが、意外と時間がかかってしまいました。
作ろうとしたアコーディオンは、こちらのCodeUpsの課題「Diving」サイトのFAQの部分です。
開閉と同時に、質問文の右端にあるマークが、プラスとマイナスに切り替わる、というものです。
今回も、まずは、しょーごさん(@samuraibrass)の「JS特訓編」を参考にさせてもらいました。
しかし、、、、しょーごさんの見本と、私が書いていたHTMLの構造が違ったんですね。
まずは、しょーごさんのサンプルを見て、jQueryの中身を理解したあと、クラス名などを自分のHTMLに合わせて書き直そうと試みたのですが、結果的にはうまくいきませんでした・・・。
HTML構造の違い
まず、しょーごさんのサンプルは、アコーディオン全体をコンテナで囲み、その中に、h4の質問文と、divの回答文が複数セット入っている、というものでした。
それに対して、私が書いたHTMLは、全体をアコーディオンというdivで囲み、その中にulタグとliタグでまずリストを作って、liタグの中に質問文と回答文がセットで入っている（liタグのアイテムが複数個ある）、という構造です。
アコーディオンは、どちらが正解というわけではなく、多分、後でWordPress化するか、他でも使い回すかなどによって、書き方が違うのかな？
私は、なんとなく、質問と回答はワンセットで一つのブロックに入れておきたかったのと、同じ課題をやっている他の方が、そういうふうに書いていたので、「WP化する時に、これじゃないと使いにくいのかな？」と思い、ulとliで書きました。
jQueryの書き方
しょーごさんのサンプルのjQueryは、「ToggleClass」を使って、質問文をクリックした時に、その次の要素（つまり回答文）にis-openクラスをつけ外し、そして質問文自身にis-activeをつけ外しして、開閉とマークのプラスマイナスを切り替えるものでした。
なので、質問文と回答文が並列に並んでいないと、まず「次の要素」を正確に選ぶことができません。（親子関係ではなく、兄弟要素として横並びにする）
私は、最初質問文(h3タグ）と回答文(pタグ）のテキストをそれぞれdivで囲い、さらにそれをliタグで囲っていたので、「次の要素」が意図した要素にならず、動きませんでした・・・。
なんとかこのサンプルのjQueryで実装しようと、クラス名を変えてみたり、htmlを変えてみたりしたのですが、開閉とマークの切り替えが意図したようにならず、一旦挫折。
最終的に、”slideToggle” を使いました
最終的に、調べて出てきたこちらのサイトを参考に、slideToggleで実装しました。
ちなみに、toggleClassと、slideToggleの違いは以下のとおりです。
単純に縦方向に開閉するのがslideToggleですね。
toggleClassとslideToggleは、jQueryで要素の表示・非表示を切り替えるメソッドです。
toggleClassは、指定した要素のclass属性値を追加または削除します。対象となる要素に指定したclass属性があれば削除し、なければ追加します。スタイルシートでclassを作成しておくと、特定の要素に簡単に追加・削除を実行できます。
slideToggleは、特定の要素を縦方向にアニメーションしながら表示・非表示にします。要素が表示されているときは非表示に、非表示のときは表示します。押すと降りてくるメニューを実装することもできます。(Source: Google検索よりAIの解答）
プラスマークの切り替えは、「show」クラスがついた時とそうで無い時の、線の角度を変えることで実装しました。
まとめ
いやー、jQueryのコード自体は、シンプルで短いものですが、HTMLと、CSSと組み合わせて、さらにクラスがついている時といないときでデザインを変える。頭ではわかっていますが、なかなか時間がかかりました。
コードスニペット登録したので、つぎこそは数分で実装したい！
