jquery - JQueryのスライドトグル1つのdivに使用される複数のボタン

Question

Web ページに一連のボタンとフォームがあります。

フォームはページの読み込み時に非表示にslideToggleなり、ボタンが押されたときにフォームを表示するために使用しています。

html は次のようになります。

<div id="links">
    <button id="btn_01" class="tog active">Open</button>
    <button id="btn_02" class="tog">Open</button>
    <button id="btn_03" class="tog">Open</button>
</div>

<div id="form">
  <button id="close">Close</button>
  <form>Form contents...</form>
</div>

これまでのところ、私が持っている（1つのボタンから起動する）JSは次のとおりです。

$("#form").hide();

$("button.tog").bind("click", function(){

    if($("button.active").length) $("button.active").removeClass("active");
    if($("#form").is(":visible") == true) { $("#form).slideUp();

    $(this).addClass('active');
    $("#form").slideToggle();
});

$("buttton#close").click( function {
    $('#form').slideUp();
});

いずれかのボタンがクリックされたとき、#form が開いている場合はそれをスライドさせ、アクティブなクラスを古いボタンから削除して、クリックしたばかりのボタンに追加する必要があります。

#form 内から button#close をクリックして、slideToggle を起動する機能も必要です (また、#links ボタンからアクティブなクラスを削除します。

私はJQueryにかなり慣れていないので、コードの順序に問題があります。

#form が開いているときに元のボタンをクリックすると、slideToggle関数が閉じてから div が再び開きます。

これの多くのバリエーションを試しましたが、適切に機能させることができません。

どんな助けでも大歓迎です。

乾杯、レオン

JSFiddle モックアップ: http://jsfiddle.net/leonharris/9mKTc