jQuery Show One Div and Hide the Others
<p><a href="http://jsfiddle.net/yrM3H/2/" rel="nofollow">http://jsfiddle.net/yrM3H/2/</a></p>

<p>I have the following code:</p>

<pre><code>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");   

});
});
</code></pre>

<p>I have multiple <code>&lt;div&gt;</code>'s, and my idea is that when I open a <code>&lt;div&gt;</code> it toggles another <code>&lt;div&gt;</code>.  And then, when I click another <code>&lt;div&gt;</code>, it hides the open <code>&lt;div&gt;</code>.  Therefore only one <code>&lt;div&gt;</code> is open at a time.</p>

<p>My only issue is that with this code, when I try to close a <code>&lt;div&gt;</code> that is already open, it will close and then open again.  Thus one <code>&lt;div&gt;</code> will always be open.</p>

<p>Any help will be appreciated, thank you.</p>

<p>I added the HTML and CSS below.  Everything works fine, except that I cannot get it so that all of them are closed.</p>

<p>I have 5 of these stacked on each other in a wrapper.</p>

<p>*edited for clarity *</p>

<pre><code>// HTML
&lt;div class="toggle"&gt;&lt;/div&gt;
&lt;div  class="hidden"&gt;&lt;/div&gt;

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