先日、showとhide要素を使って、簡単なアコーディオンを作ってみましたが、今回は、if文(条件分岐)を使った方法を書いておきます。実装しやすい方でやればいいかなーと思っていて、個人的にはif文を使った方がわかりやすかったです。Progateの中級編で学ぶやり方なので復習がてらまとめてみます。CodePen.これがアコーディオンです。前回作ったのは、一つのアコーディオンを開くと他の回答は自動的に閉じてしまう設定でした。これは、開けたら開きっぱなしの状態。この設定にされているWebページが多いように感じます。それに、シンプルでみやすいですね。アコーディオン1答えの部分はCSSで非表示23つの質問部分には同一のclass名を付与3clickイベントを作る4答えを表示するHTMLには「open」クラスを付ける丸暗記でなく記述したコードがそれぞれどんな処理をしているのか、プロセスを理解しておくのも大事だと思いました。僕は以前にこんなツイートでまとめていました。アコーディオンの概念としては以下の通り1アコーディオンのリストをクリック2.answerは.openを持っているか[true]なら3-1openを外す4-1.answerを隠す[false]なら3-2openをつける4-2.answerを表示これをif文で書くとこのようになります。{//falseの時openクラスをつける.answerを表示spanを-に}あとは、それぞれの箇所に適切なメソッドを書いて行けばOK。slideDownif文でのアコーディオンの実装まとめ答えの部分はCSSで非表示3つの質問部分には同一のclass名を付与clickイベントを作る答えを表示するHTMLには「open」クラスを付ける基本を覚えれば、アコーディオンのデザインを変えたり、動きを変えたりするだけで応用ができるはず。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。