Show/hide jQuery script does not toggle elements correctly
<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>
