今回の内容

• ・スライドで要素の表示・非表示を切り替える

スライドで要素の表示・非表示を切り替える

IDとクラスを使用して関連付かせるのもアリですが
今回はそれと、関連付けしない方法の２種類を実装してみます。

idとクラスで関連付かせる方法

$('#openElem1').bind('click',function()
{
 var thisId = $(this).attr('id');

 if($('.'+thisId).hasClass('open') > 0)
 {
  $('.'+thisId).slideUp("",function()
  {
    $('.'+thisId).removeClass('open');
  });
 }
 else
 {
  $('.'+thisId).slideDown("",function()
  {
   $('.'+thisId).addClass('open');
  });
 }
});

クリックイベントで実行させた後、まず、【オープンさせる所に、openってクラスが存在しているかどうか】
の分岐が入ります。
openがある場合は、スライドダウン(開く)処理を
openがない場合は、スライドアップ(閉じる)処理を
それぞれ実行しています。

また、各自コールバック内でopenクラスを追加または削除しています。

slideToggleがあるんですけどｗｗｗ

そう、slideUp slideDownを自動で判別してくれる、slideToggleもあるんですが
こいつ結構バカなんで嫌いなんです。
下の例、連打してみてください。

$('#openElem2').bind('click',function()
{
 var thisId = $(this).attr('id');
 $('.'+thisId).slideToggle();
});

だっさ
連打した分動いていますね。

じ、じゃぁstopさせたらええやんか！！

では早速stop入れてみますね。
また連打してみてください。

$('#openElem3').bind('click',function()
{
 var thisId = $(this).attr('id');
 $('.'+thisId).stop().slideToggle();
});

だっさ
ふにゃふにゃしてるｗ

個人差があるかもしれないんですが、こんな動きしたりとかもそうですし
細かく設定したい時とかあるので(スライドダウンしたら画像変えるとか。)
僕は使いません。自動判別してくれるのは便利なんですけどね。