【jQuery】animateメソッドにtoggleを指定して横方向に開閉する方法

jQueryのslideToggle()は要素の表示・非表示を切り替えるのにとても便利なメソッドですが、横方向に開閉することはできません。

しかし、animate()とtoggleキーワードを合わせることで横方向に開閉することができるようになります。

 

slideToggle()で縦方向に開閉

まずは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はクリック時にslideToggle()をかけるだけです。

$("dt").click(function(){
	$("dd").slideToggle("slow");
});

 

これだけでクリック時の縦方向の開閉はできるようになります。

これを横方向に開閉させたい場合はanimate()を一緒に使います。

 

横方向に開閉する方法

横方向に開閉する場合はanimate()メソッドにtoggleキーワードを使用すると簡単に実装できます。

「animate({‘width’: ‘toggle’});」を指定するだけで横方向に開閉するようになります。

jQuery

$("dt").click(function(){
  $("dd").animate({"width":"toggle"});
});

 

animate()メソッドを使っているので開閉のスピードなども調整することができます。