title: Show/hide jQuery script does not toggle elements correctly
body: <p>I need jQuery script that:</p>
  
  <ol>
  <li>by default will shown only one active div others will be hide</li>
  <li>only one active at moment (if click newly hidden div -> it opens and currently opened div will close)</li>
  </ol>
  
  <p>I have some code and a demonstration:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="toggle"&gt;Content&lt;/div&gt;
  &lt;div  class="hidden hide"&gt;Content&lt;/div&gt;
  &lt;div class="toggle"&gt;Content&lt;/div&gt;
  &lt;div  class="hidden show"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.toggle {width:398px; height:48px; cursor: pointer; border: 1px solid #000}
  .hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}
  
  .hide {display:none;}
  .show {display:block;}
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
      $(".toggle").click(function() {
         $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
         $(this).toggleClass('active').next().slideToggle("fast");
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kolxoznik1/C7W2D/" rel="nofollow">http://jsfiddle.net/kolxoznik1/C7W2D/</a></p>
  
  <p>Problem is that it doesn't close previously opened div correctly when open new.</p>