jQuery

【jQuery】if文(条件分岐)を使ったアコーディオンの実装

先日、showとhide要素を使って、簡単なアコーディオンを作ってみましたが、今回は、if文(条件分岐)を使った方法を書いておきます。

 

http://keibloglife.com/2019/06/12/jquery-show-hide/

どちらがやりやすいかはわかりませんが、
実装しやすい方でやればいいかなーと思っていて、個人的にはif文を使った方がわかりやすかったです。

Progateの中級編で学ぶやり方なので復習がてらまとめてみます。

jQueryでアコーディオンの実装

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


これがアコーディオンです。
前回作ったのは、一つのアコーディオンを開くと他の回答は自動的に閉じてしまう設定でした。

これは、開けたら開きっぱなしの状態。むしろこの設定にされているWebページが多いように感じます。
それに、シンプルでみやすいですね。

アコーディオンの記述方法


僕は以前にこんなツイートでまとめていました。

→ アコーディオンの概念としては以下の通り

①アコーディオンのリストをクリック
②.answerは.openを持っているか
[true]なら
③-1openを外す
④-1.answerを隠す
[false]なら
③-2openをつける
④-2.answerを表示

これをif文で書くとこのようになります。

if($(“.answer”).hasClass(“open”)){
 //trueの時
 openクラスを外す
 .answerを隠す
 spanを+に
} else {
 //falseの時
 openクラスをつける
 .answerを表示
 spanを-に
}

あとは、それぞれの箇所に適切なメソッドを書いて行けばOK。

  • openクラスを外す→ removeClass
  • answerを隠す → slideUp
  • openクラスをつける → addClass
  • answerを表示 → slideDown

 

if文でのアコーディオンの実装まとめ

  1. 答えの部分はCSSで非表示
  2. 3つの質問部分には同一のclass名を付与
  3. clickイベントを作る
  4. 答えを表示するHTMLには「open」クラスを付ける

基本を覚えれば、アコーディオンのデザインを変えたり、動きを変えたりするだけで応用ができるはず。
コツコツ学んでいきます。