控制slideToggle（）jQuery

Question

我有4個form_header divs和4個form_body divs。我正在使用jQuery slideToggle（）通過單擊表單標題來展開form_body div。

這是我在做什麼一個完美的例子： jQuery collapsible div

這是我所使用的代碼：

<script type="text/javascript"> 
       $(document).ready(function(){ 

     $(".form_body").hide(); 

     $(".form_header").click(function(){ 
      $(this).next(".form_body").slideToggle(0); 
     }); 
     }); 
    </script> 

我想什麼是我花費這些div之一，並擴大另一個擴大的崩潰，以便一個不能同時擴大其中兩個或更多。我怎樣才能做到這一點？謝謝你的幫助。

Answer 1

正如人們已經注意到它可能是更容易使用這個插件，但是備選地，這樣的事情應該做的伎倆：

$(".form_header").click(function() { 
    $(".form_body").not($(this).next()).slideUp(); 
    $(this).next(".form_body").slideToggle(); 
}); 

它隱藏所有其他.form_body元素，然後切換正確的一個。查看運行here的示例。

Answer 2

你可能會更好使用jQuery UI Accordion。你以後的功能已經內置