簡単！slidetoggleでdisplay: flex;を使用する方法【jQuery】

みなさんこんにちは！ワトスンです。
今回は、、

といった方のために解決方法をご紹介したいと思います。

■読んでほしい人
slidetoggleの使用時に中身の要素をdisplay: flex;で横並びにしたい方

それではさっそく解決方法をご紹介します！

slideToggleとdisplay: flex;を使用するための答え

さっそくまず答えからお見せします！
完成系はこちらです↓

See the Pen
Untitled by Tatuya Hidaka (@Tatuya-Hidaka)
on CodePen.

こちらのHTML要素を参考に詳しく解説していきます。

slideToggleとdisplay: flex;併用はhide()を使用しよう！

slideToggleを使用する場合、上記コードの場合だと「.content__item」をdisplay:none;で非表示にしておき、「.content__btn」押下時にslideToggleによってdisplay:block;にさせる必要があります。

しかし、今回は、「.content__btn」押下時に「.content__item」をdisplay:block;ではなく、display:flex;にしたいわけです。

そのため、最初から「.content__item」にdisplay:none;を設定しておくと、display:flex;を設定することができなくなります。
同じ要素にdisplayを2個書いても下部に書いたスタイルが適用されるからです。

スタイル側ではdisplay:flex;を指定したいので、初期表示時にdisplay:none;で非表示にしておく方法ではダメなわけです。

それでは、display:none;の代わりに「.content__item」を非表示にしておくにはどのようにすれば良いでしょうか？

答えは、display:none;の代わりに、js側でhide()メソッドを使用し非表示することです。
こうすることでスタイル側ではdisplay:flexを設定することが可能になります！

これで、「.content__btn」をクリック前「.content__item」は非表示状態で、クリック後はdisplay:flexで表示されます。

子要素がチラつく場合の対処法

ここからはプラスで学んでいきたい方のために記載します。

上で解説したhide()ですが、要素をhide()で隠したもののページを読み込んだ際に少しその要素がチラ見えしてしまうことがあります。
この原因は、jsでのhide()処理が効くタイミングが遅いためです。

このような場合の対処方法もきちんとあります。

子要素にスタイルdisplay:none;を設定しjsで表示させる

hide()したい要素の子要素「.content__item-text」をCSSで初めからdisplay:none;にしておき、hide()と同じタイミングで.css(‘display’,’block’)を発火させます。

CSSで先に子要素を非表示にしておくことによって要素の中身がチラ見するのを防ぐことができます。
非表示にしたままだとslideToggleした後、中身が非表示のままなのでローディング完了した時に.css(‘display’,’block’)で表示を戻してあげることで問題なく表示することができます。

解決方法は必ずある