jquery two clicks instead of one to execute code
<p>I found this javascript code, and that's exactly what I'm looking for. This is a Show/Hide code with slide effect.</p>

<pre><code>$(document).ready(function() {
if($('div.tab').length &gt; 0) {
    $('div.tab').click(function() {
        if($(this).hasClass('open')) {
            $(this).removeClass('open');
            $(this).addClass('close');
            $(this).next().slideDown(300);
            return false;
        } else {
            $(this).removeClass('close');
            $(this).addClass('open');
            $(this).next().slideUp(300);
            return false;
        }
    })
}
</code></pre>

<p>Now, I wanted to add a code to show only one DIV at a time, closing opened DIV with slide effect. So, I add some code and it works how I want it to work. But the problem is, when one DIV is opened, and I click on another, new DIV, everything is working, but when I click on already visited DIV, I need two clicks, instead of one, to execute the code. I don't have a knowledge in js coding, so I'm asking here for your help. </p>

<p>Here is a code with my changes.</p>

<pre><code>$(document).ready(function() {
if($('div.tab').length &gt; 0) {
    $('div.tab').click(function() {
        if($(this).hasClass('open')) {
            $(this).removeClass('open');
                  $(this).addClass('close')**.siblings('div.container').slideUp(300)**;
            $(this).next().slideDown(300);
            return false;
        } else {
            $(this).removeClass('close');
            $(this).addClass('open');
            $(this).next().slideUp(300);
            return false;
        }
    })
}
</code></pre>
