控制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。你以后的功能已经内置