jQueryでスライドして表示非表示を切り替えるにはslideDown()やslideUp(),あるいはslideToggle()などのメソッドを使用することで簡単に実現できます。簡単で便利ですから頻繁に活用されるものと思われますが横方向に開閉できないのが難点です。
ところが、「width」プロパティに「toggle」キーワードを使用すると簡単に横方向の開閉が実現します。
slideToggle()での表示・非表示
htmlコード
<dl> <dt>ここをクリックしてddの表示・非表示を切り替える</dt> <dd> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, iste odit adipisci hic quos aliquid, officia, eveniet, magnam cumque ullam itaque excepturi natus tenetur harum enim sit minima iure debitis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, iste odit adipisci hic quos aliquid</p> </dd> </dl>
jQueryコード
$("dt").click(function(){
$("dd").slideToggle("slow");
});
横方向に開閉する方法〜ネガティブマージンの使用
slideToggle()は上下に開閉するものですから横方向に開閉しようとすると、animate()メソッドでmargin-leftにネガティブマージンを設定するなどの工夫が必要になります。
jQueryコード
$("dt").click(function(){
if($("dd").css("margin-left") == "0px"){
$("dd").animate({"margin-left":"-300px"});
}else{
$("dd").animate({"margin-left":"0"});
}
});
横方向に開閉する方法〜「toggle」キーワードの活用
実は横方向に開閉する場合はanimate()メソッドの「toggle」キーワードを使用すると簡単です。
animate({‘width’:’toggle’})と指定することで横開閉で表示と非表示を行います。
jQueryコード
$("dt").click(function(){
$("dd").animate({"width":"toggle"});
});
その他の開閉と「toggle」キーワード
animateメソッドでは数値で指定できるCSSプロパティを指定することで、アニメーションを実現させることができますが、その値の指定は数値だけではなく、「hide」、「show」、「toggle」のキーワードが利用可能です。特に「toggle」はif文なしで開閉ができますので重宝されるはずです。「toggle」キーワードはwidthだけではなく、heightやopacityなどでも使用可能です。
