アコーディオンメニューなどでよく使われるjQueryのslideToggle。
slideToggleで開閉させると、開閉する要素のdisplayプロパティの値がblockになってしまいflexで動作しない、なんて事がありました。その際にdisplay: flex;を保つ方法を詳しく解説していきます。
要素をhide();で非表示にする
まずは、以下のように開閉させたい要素を用意します。
<dl>
<dt>開閉ボタン</dt>
<dd>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
</dd>
</dl>dt {
font-weight: bold;
padding: 20px;
background-color: #8FC051;
cursor: pointer;
}
dd {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
padding: 20px;
background-color: #F2F2F2;
}
dd p {
width: calc((100% - 20px) / 2);
padding: 10px;
background-color: #FFF;
}上の状態の開閉メニューのddを最初に閉じた状態にし、jQueryを使用してdtをクリックで開閉するようにしていきます。
$(function(){
$('dd').hide();
$('dt').on('click', function(){
$('dd').slideToggle();
});
});このように記述する事で、開閉した際にもddがdisplay: flex;を保ったまま開閉できます。
ポイントは、最初にjQueryでdisplay: flex;を保ちたい要素をhide()で非表示にする事です。その後は通常通りslideToggleで開閉させてください。
インラインスタイルでdisplay: flex;にする
次に、cssを使ってslideToggleを使用してもdisplay: flex;を保つ方法を紹介します。
あまり良い方法では無いかと思いますが、以下のようなcssでも可能でした。
dd {
display: none;
}
dd[style*="display: block"] {
display: flex!important;
}$(function(){
$('dt').on('click', function(){
$('dd').slideToggle();
});
});slideToggleでインラインスタイルでdisplay: block;になるのを利用して、importantを使用しdisplayをflexに設定しています。
いずれの方法でもslideToggleでdislayをflexに保つ事が可能ですので、場面に合わせて使い分けていただけらばと思います。
さいごに
いかがでしたでしょうか。
jQueryのslideToggleはよく使用するかと思いますので、いざという時に困らないよう覚えておくといいかと思います。
