//jsfiddle.net/yrM3H/2/

У меня есть следующий код:

jQuery(document).ready(function() {
  jQuery(".toggle").next(".hidden").hide();
  jQuery(".toggle").click(function()
  { 
    $('.active').toggleClass('active').next('.hidden').slideToggle(300);
    $(this).toggleClass('active').next().slideToggle("fast");   

});
});

У меня есть несколько<div>и моя идея в том, что когда я открываю<div> это переключает другой<div>, А потом, когда я нажимаю другой<div>скрывает открытую<div>, Поэтому только один<div> открыт одновременно.

Моя единственная проблема заключается в том, что с этим кодом, когда я пытаюсь закрыть<div> который уже открыт, он закроется, а затем снова откроется. Таким образом, один<div> всегда будет открыт.

Любая помощь будет оценена, спасибо.

Я добавил HTML и CSS ниже. Все работает нормально, за исключением того, что я не могу получить это так, что все они закрыты.

У меня есть 5 из них сложены друг на друга в обертке.

* отредактировано для ясности *

// HTML
<div class="toggle"></div>
<div  class="hidden"></div>

// CSS
.toggle {width:398px; height:48px; cursor: pointer;}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}