アコーディオンメニューでプラスとマイナスの切り替え

こんにちは、ゆんつです。

企業のWEBサイトではQ&Aのページをよく見かけます。

Q&Aのページでは質問部分をクリック又はタッチしするとスーッと回答が現れ、再びタッチすると回答が閉じるというというものが多いようです。

このように親メニューをタッチすると子メニューが開くメニューを「アコーディオンメニュー」と言います。

See the Pen qwKxaJ by konpure (@yuntu) on CodePen.0

このアコーディオンメニュー。

子メニューが閉じているときは親メニューにはプラスのマークがついていて、子メニューが開くとプラスからマイナスに切り替わるものをよく見ます。

これらのプラスマイナスはFont Awsomeなどを使って表現することもできますが、HTMLとCSSとjQueryで作ることも出来ます。

今日はHTMLとCSSでプラスとマイナスを作り、jQueryでプラスとマイナスを切り替える方法について書きたいと思います。

疑似要素とjQueryを使う

閉じてる状態のときは「＋」、開いている状態のときは「－」にしたい場合、疑似要素とjQueryを使うと簡単に実現できます。

まずプラスマイナスを設定したい要素に疑似要素のbeforeとafterで全く同じ横棒を2つ作ります。

そして、どちらか一方の線だけ90度回転させると。

プラスになります。

ゆんつ

簡単！

親メニューのクリックをきっかけにしてプラスとマイナスを切り替えるには、回転が0℃になるクラスを作成し、jQueryのtoggleClass使ってどちらか一方の疑似要素にクリックのたびにそのクラスがついたり外れたりするようにしてあげれば良いだけです。

具体的に作ってみます。

See the Pen pBWzGN by konpure (@yuntu) on CodePen.0

解りやすくするために2本の棒の色は別々にしてあります。

青いボタンをクリックしてもらうと、そのたびにプラスとマイナスが切り替わっていることと思います。

あとは、これをアコーディオンメニュー（クリックすると開くメニュー）の親メニューの端っこに配置し、jQueryのslideToggleと組み合わせてアコーディオンの開閉と合わせることで子メニューが閉じているときはプラス、開いているときはマイナスになるアコーディオンメニューを作ることが出来ます。

See the Pen accordion2 by konpure (@yuntu) on CodePen.0

ゆんつ

簡単だったね

それでは、またー。