title: jQuery Show One Div and Hide the Others
body: <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>