jQueryのslideToggleをdisplay: flexで動作させる方法

jQueryのslideToggleを使用するとアコーディオンの動作を簡単に実装することができるのですごく便利ですが、表示と非表示を切り替えたい要素がdisplay: flexだったときにうまくいかなかったのでその時のメモです。

やりたいこと

dtをクリックすると初期状態では非表示になっているdisplay: flexのddをslideToggleで表示したい。

“初期状態が非表示”というところがポイントになります。

NG

ddにdisplay: flexを指定しているのですが初期状態を非表示にしたいためdisplay: noneで上書きしている。

See the Pen slideToggle NG by tadabi (@tadabi) on CodePen.

その結果、dtをクリックしてslideToggleでddを表示するとddはdisplay: flexではなくdisplay: blockになってしまい意図した表示にはなりません。

OK

同じくddにdisplay: flexを指定しているのですが、CSSのdisplay: noneで初期状態を非表示にするのではなくjQueryのhideを使用してddを非表示にします。

See the Pen slideToggle OK by tadabi (@tadabi) on CodePen.

そうすることでdtをクリックしてもddはdisplay: flexのまま表示・非表示を切り替えることができるようになります。

おしまい。