悩む人jQueryを使ってアコーディオンを実装したいけど、全部開いてしまうし、矢印もうまく動かない・・・。ひとつの要素だけ開きつつ、矢印も一緒に動くアコーディオンを作る方法が知りたいな・・。こんなお悩みに答えます。jQueryでアコーディオンを作るのは基本ですが、中でも、「ひとつの要素だけ開く」や「矢印も一緒に動く」など、少し応用が入ってくると手が止まってしまいますよね。僕も、iSaraの模写をしていまして、正直めちゃくちゃ苦戦しました。#isara模写アコーディオンの実装は正直苦戦!✅スマホ→PCでアコーディオンが消える✅アコーディオンが開くのは一つだけ→複数の要素が同時に開いてしまう(^^;;✅開閉ボタンがうまく切り替わらない。今回のアコーディオン実装の条件としては、ひとつだけ展開し、他の要素は閉じる矢印も一緒に動くこんな感じを実現したいです。それでは解説していきましょう。CodePen.実際にクリックしていただければわかりますが、1つの要素が展開されている時には、他の要素は閉じるようになっています。見にくければ大きな画面がご確認くださいこれをコピペしてくださいと言ってしまえばこれで終わってしまうので、少しだけ解説していきます。});});一つの要素だけを展開するには、jQueryに記述します。//クリックされたquestion以外のanswerを閉じるこの記述をすることで、クリックした要素以外を閉じることができます。not(this)の部分がそうですね。*/}矢印は、CSSで作ります。擬似要素で作り、positionで位置を指定します。#000;これでまず擬似要素の上部と右側に4pxのボーダーを作ります。rotate(135deg);で、要素の角度を調整し、下向けの矢印に変更します。*/}あとは、親要素に.openクラスがついた時のスタイルを記述すれば、矢印も一緒に動くアコーディオンが完成します。使い回せるようにストックしておこう今回のコードは、iSaraのスタイルを参考に作りましたが、どのサイトでも使われるような汎用的なスタイルだと思っています。これができると、応用も対応しやすいし、ストックしてすぐに使えるようにしておきたいですね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。